@@ -4,11 +4,11 @@ title: TypeScript
4
4
5
5
Svelte コンポーネント内では TypeScript が使用できます。[ Svelte VSCode extension] ( https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode ) などの IDE の拡張機能を使用すると、エディター上でエラーをすぐに見つけやすくなります。また、[ ` svelte-check ` ] ( https://www.npmjs.com/package/svelte-check ) は同じことをコマンドライン上で実行できるため、CI と統合できます。
6
6
7
- ## セットアップ
7
+ ## セットアップ <!-- setup -->
8
8
9
9
Svelte コンポーネント内で TypeScript を使用するには、TypeScript を JavaScript に変換するプリプロセッサーを追加する必要があります。
10
10
11
- ### SvelteKit または Vite を使用する
11
+ ### SvelteKit または Vite を使用する <!-- using-sveltekit-or-vite -->
12
12
13
13
TypeScript を使い始めるのに最も簡単な方法は、` npm create svelte@latest ` とタイプして、新しい SvelteKit プロジェクトを scaffold し、プロンプトに従って TypeScript オプションを選択することです。
14
14
@@ -39,7 +39,7 @@ export default config;
39
39
40
40
いずれの場合でも、` vitePreprocess ` を使用した ` svelte.config.js ` が追加されます。Vite/SvelteKit はこの設定ファイルを読み込みます。
41
41
42
- ### その他のビルドツール
42
+ ### その他のビルドツール <!-- other-build-tools -->
43
43
44
44
代わりに Rollup や Webpack のようなツールを使用している場合、ツール向けの Svelte プラグインをインストールしてください。Rollup の場合は [ rollup-plugin-svelte] ( https://github.com/sveltejs/rollup-plugin-svelte ) 、Webpack の場合は[ svelte-loader] ( https://github.com/sveltejs/svelte-loader ) です。どちらの場合も、` typescript ` と ` svelte-preprocess ` をインストールして、プリプロセッサーをプラグインの設定に追加する必要があります(より詳しい情報については、それぞれのREADMEを確認してください)。新しいプロジェクトを開始する場合には、[ rollup] ( https://github.com/sveltejs/template ) や [ webpack] ( https://github.com/sveltejs/template-webpack ) のテンプレートを使ってスクリプトからセットアップを scaffold することもできます。
45
45
@@ -115,7 +115,7 @@ Event は `createEventDispatcher` を使って型付けできます。
115
115
<button on:click={handleClick} on:keydown={handleType}>Click</button>
116
116
```
117
117
118
- ## ビルトインのDOM型を拡張する
118
+ ## ビルトインのDOM型を拡張する <!-- enhancing-built-in-dom-types -->
119
119
120
120
Svelte はベストエフォートで存在する全ての HTML DOM の型を提供します。ときには実験的な属性やアクションから来るカスタムイベントを使いたい場合があるかもしれません。そのような場合には、TypeScript が型エラーを発生し、未知の型であると報告します。もし実験的ではない標準の属性やイベントであるなら、Svelte の [ HTML 型] ( https://github.com/sveltejs/svelte/blob/master/packages/svelte/elements.d.ts ) から来た型付けの誤りによる可能性があります。その場合、issue や修正の PR を歓迎します。
121
121
@@ -160,15 +160,15 @@ declare module 'svelte/elements' {
160
160
export {}; // これが ambient module ではなく、他の型が拡張される代わりに上書きされることを保証する
161
161
```
162
162
163
- ## 実験的な高度な型付け
163
+ ## 実験的な高度な型付け <!-- experimental-advanced-typings -->
164
164
165
165
特定のインターフェイスを実装するコンポーネントの型付け、明示的に型付けされた slot、ジェネリクスの使用など、より高度なユースケースで TypeScript を最大限に活用するには、いくつかの機能が欠けています。これらの機能は、実験的な高度な型機能を利用することで実現可能です。使用方法に関するより詳しい情報は、[ この RFC] ( https://github.com/dummdidumm/rfcs/blob/ts-typedefs-within-svelte-components/text/ts-typing-props-slots-events.md ) を参照してください。
166
166
167
167
> API は実験的であるため、いつでも変更される可能性があります
168
168
169
- ## 制限事項
169
+ ## 制限事項 <!-- limitations -->
170
170
171
- ### マークアップ内ではTSは使えない
171
+ ### マークアップ内ではTSは使えない <!-- no-ts-in-markup -->
172
172
173
173
TypeScript はテンプレートのマークアップ内では使えません。たとえば、次のコードは機能しません。
174
174
@@ -184,7 +184,7 @@ TypeScript はテンプレートのマークアップ内では使えません。
184
184
{/if}
185
185
```
186
186
187
- ### リアクティブな宣言
187
+ ### リアクティブな宣言 <!-- reactive-declarations -->
188
188
189
189
TypeScript を使用したリアクティブな宣言に対しては、変数と同じように型付けすることはできません。たとえば、次のコードは動作しません。
190
190
0 commit comments