TypeScriptをSvelteと統合します-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

TypeScriptをSvelteと統合します

尊渡假赌尊渡假赌尊渡假赌

Mar 31, 2025 pm 01:52 PM

TypeScriptをSvelteと統合します

JavaScriptフレームワークの間で急速に人気を博しているSvelteは、テンプレートバインディング内のシームレスなJavaScript統合を備えたテンプレートベースのアプローチを提供します。そのリアクティブシステムは、そのシンプルさ、柔軟性、効率性で賞賛されています。先行（AOT）コンパイラとして、Svelteは印象的なパフォーマンスと小さなバンドルサイズを誇っています。このガイドは、TypeScriptをSvelteテンプレートに統合することに焦点を当てています。 Svelteは初めてですか？公式のチュートリアルとドキュメントから始めます。

プロジェクトに従うかデバッグすることを希望する人は、サンプルコードを備えたリポジトリを利用できます。ブランチは、以下に概説するさまざまな手順を示しています。

注：ここでは手動統合について詳しく説明していますが、新しいプロジェクトには公式のSvelteテンプレートを使用することを検討してください。説明されているタイプスクリプト構成は、テンプレートを使用する場合でも関連性があります。

タイプスクリプトとSvelteのセットアップ

このセクションでは、基本的なセットアップについて詳しく説明します。リポジトリのinitial-setupブランチは、基本的なSvelteプロジェクトとTypeScriptの出発点を提供します。重要なことに、タイプスクリプトは最初はスタンドアロンの.tsファイル内でのみ機能します。 Svelteテンプレートへの統合には、さらに構成が必要です。

この最初のセットアップの重要なコンポーネントには次のものがあります。

tsconfig.json ：このファイルは、TypeScriptのコンパイラを構成します。この例では、コンパイルからnode_modulesを除く、最新のJavaScript（ module: "esNext" 、 target: "esnext" ）およびノードモジュール解像度（ moduleResolution: "node" ）を使用します。

 {
  「コンパイラポーション」：{
    「モジュール」：「esnext」、
    「ターゲット」：「esnext」、
    「moduleResolution」：「ノード」
  }、
  「除外」：["./node_modules"]]
}

typings/index.d.ts ：このファイルを使用すると、TypeScriptはSvelteファイルと対話できます。それがなければ、Svelteコンポーネントをインポートするときにタイプスクリプトはエラーを報告します。

宣言モジュール "*.svelte" {
  const Value：Any;
  デフォルト値をエクスポートします。
}

webpack.config.js ：これによりsvelte-loaderを使用してSvelteファイルを処理するようにWebpackを構成します。

 {
  テスト：/\ .(html| svelte )$/
  使用： [
    {ローダー： "babel-loader"}、
    {
      ローダー：「Svelte-Roader」、
      オプション：{
        emitcss：本当、
      }、
    }、
  ]、、
}

セットアップを確認するには、 npm start （WebPack Watch）を実行し、 npm run tscw （TypeScript Watch）を別々の端子で実行します。 .tsファイルを変更し、エラー報告を観察することにより、タイプスクリプトチェックをテストします。 node serverを実行すると、アプリケーションをローカルでテストできます。

タイプスクリプトをSvelteコンポーネントに統合します

タイプスクリプトをSvelteコンポーネントに直接追加するには、 lang="ts"を追加します

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。