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

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

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

Value is: {val}

svelte-checkでタイプチェックを追加します

不足している小道具の処理

高度な考慮事項

結論

ホームページ

ウェブフロントエンド

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を実行すると、アプリケーションをローカルでテストできます。