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衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

MinGW - Minimalist GNU for Windows

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