TypeScript のコンパイル
TypeScript は、プレーンな JavaScript にトランスパイルされる、型付けされた JavaScript のスーパーセットです。堅牢なコンポーネントを構築するのに役立つクラス、モジュール、インターフェイスを提供します。
TypeScript コンパイラのインストール
Visual Studio Code には TypeScript 言語サポートが含まれていますが、TypeScript コンパイラ tsc は含まれていません。TypeScript ソースコードを JavaScript にトランスパイルする (tsc HelloWorld.ts) には、TypeScript コンパイラをグローバルまたはワークスペースにインストールする必要があります。
Node.js パッケージ マネージャーである npm を通じて TypeScript をインストールするのが最も簡単な方法です。npm がインストールされている場合、次のようにして TypeScript をコンピュータにグローバル (-g) にインストールできます。
npm install -g typescript
バージョンまたはヘルプを確認することで、インストールをテストできます。
tsc --version
tsc --help
もう 1 つの選択肢は、プロジェクトに TypeScript コンパイラをローカルにインストールする (npm install --save-dev typescript) ことです。これには、他の TypeScript プロジェクトとの相互作用の可能性を回避できるという利点があります。
コンパイラと言語サービス
VS Code の TypeScript 言語サービスは、インストールされている TypeScript コンパイラとは別のものであることに留意することが重要です。TypeScript ファイルを開くと、言語ステータス バー項目で VS Code の TypeScript のバージョンを確認できます。
ピン アイコンを使用して、TypeScript のバージョンをステータス バーに固定できます。
記事の後半では、VS Code が使用する TypeScript 言語サービスのバージョンを変更する方法について説明します。
tsconfig.json
通常、新しい TypeScript プロジェクトの最初のステップは、tsconfig.json ファイルを追加することです。tsconfig.json ファイルは、コンパイラ オプションや含めるべきファイルなど、TypeScript のプロジェクト設定を定義します。これを行うには、ソースを保存したいフォルダーを開き、tsconfig.json という名前の新しいファイルを追加します。このファイル内では、IntelliSense (⌃Space (Windows, Linux Ctrl+Space)) があなたをサポートします。
ES5、CommonJS モジュール、ソース マップのためのシンプルな tsconfig.json は次のようになります。
{
"compilerOptions": {
"target": "ES5",
"module": "CommonJS",
"sourceMap": true
}
}
これで、プロジェクトの一部として .ts ファイルを作成すると、豊富な編集体験と構文検証が提供されます。
TypeScript を JavaScript にトランスパイルする
VS Code は、統合されたタスク ランナーを通じて tsc と統合します。これを使用して .ts ファイルを .js ファイルにトランスパイルできます。VS Code タスクを使用するもう 1 つの利点は、統合されたエラーと警告の検出が[問題] パネルに表示されることです。簡単な TypeScript の Hello World プログラムをトランスパイルする手順を見ていきましょう。
ステップ 1: 簡単な TS ファイルを作成する
空のフォルダーで VS Code を開き、helloworld.ts ファイルを作成し、そのファイルに次のコードを配置します...
let message: string = 'Hello World';
console.log(message);
TypeScript コンパイラ tsc が正しくインストールされ、Hello World プログラムが動作することをテストするには、ターミナルを開き、tsc helloworld.ts と入力します。VS Code 内で直接統合ターミナル (⌃` (Windows, Linux Ctrl+`)) を使用できます。
これで、トランスパイルされた helloworld.js JavaScript ファイルが表示されます。Node.js がインストールされていれば、node helloworld.js と入力して実行できます。
ステップ 2: TypeScript のビルドを実行する
グローバルな **[ターミナル]** メニューから **[ビルド タスクの実行]** (⇧⌘B (Windows, Linux Ctrl+Shift+B)) を実行します。前のセクションで tsconfig.json ファイルを作成した場合、次のピッカーが表示されるはずです。
[tsc: build] エントリを選択します。これにより、ワークスペースに HelloWorld.js と HelloWorld.js.map ファイルが生成されます。
[tsc: watch] を選択した場合、TypeScript コンパイラは TypeScript ファイルの変更を監視し、変更があるたびにトランスパイラを実行します。
内部的には、TypeScript コンパイラをタスクとして実行しています。使用するコマンドは tsc -p . です。
ステップ 3: TypeScript ビルドをデフォルトにする
**[ビルド タスクの実行]** (⇧⌘B (Windows, Linux Ctrl+Shift+B)) をトリガーしたときに直接実行されるように、TypeScript ビルド タスクをデフォルトのビルド タスクとして定義することもできます。そのためには、グローバルな **[ターミナル]** メニューから **[既定のビルド タスクの構成]** を選択します。これにより、利用可能なビルド タスクのピッカーが表示されます。TypeScript の **[tsc: build]** を選択すると、.vscode フォルダー内に次の tasks.json ファイルが生成されます。
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"problemMatcher": [
"$tsc"
],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
このタスクには、タスクの kind を build に設定し、それをデフォルトにする group JSON オブジェクトがあることに注意してください。これで、**[ビルド タスクの実行]** コマンドを選択するか、(⇧⌘B (Windows, Linux Ctrl+Shift+B)) を押すと、タスクを選択するプロンプトが表示されずにコンパイルが開始されます。
ヒント: VS Code の実行/デバッグ機能を使用してプログラムを実行することもできます。VS Code での Node.js アプリケーションの実行とデバッグに関する詳細は、Node.js チュートリアルにあります。
ステップ 4: ビルドの問題を確認する
VS Code のタスク システムは、問題マッチャーを通じてビルドの問題を検出することもできます。問題マッチャーは、特定のビルド ツールに基づいてビルド出力を解析し、統合された問題の表示とナビゲーションを提供します。VS Code には多くの問題マッチャーが付属しており、上記の tasks.json で見られる $tsc は TypeScript コンパイラ出力用の問題マッチャーです。
例として、TypeScript ファイルに簡単なエラー (console.log に余分な 'g') があった場合、tsc から次のような出力が得られるかもしれません。
HelloWorld.ts(3,17): error TS2339: Property 'logg' does not exist on type 'Console'.
これはターミナル パネル (⌃` (Windows, Linux Ctrl+`)) に表示され、ターミナル ビューのドロップダウンで **[Tasks - build tsconfig.json]** を選択します。
ステータス バーでエラーと警告の数を確認できます。エラーと警告のアイコンをクリックすると、問題のリストが表示され、それらに移動できます。
キーボードを使用してリストを開くこともできます: ⇧⌘M (Windows, Linux Ctrl+Shift+M)。
ヒント: タスクは多くのアクションに対して豊富なサポートを提供します。それらを構成する方法の詳細については、タスクのトピックを確認してください。
JavaScript ソース マップのサポート
TypeScript のデバッグは、JavaScript のソース マップをサポートしています。TypeScript ファイルのソース マップを生成するには、--sourcemap オプションでコンパイルするか、tsconfig.json ファイルの sourceMap プロパティを true に設定します。
インライン ソース マップ (コンテンツが別のファイルではなくデータ URL として保存されるソース マップ) もサポートされていますが、インライン ソースはまだサポートされていません。
生成されたファイルの出力場所
生成された JavaScript ファイルを TypeScript ソースと同じフォルダーに置くと、大規模なプロジェクトではすぐに散らかってしまいます。outDir 属性を使用して、コンパイラの出力ディレクトリを指定できます。
{
"compilerOptions": {
"target": "ES5",
"module": "CommonJS",
"outDir": "out"
}
}
派生した JavaScript ファイルを非表示にする
TypeScript で作業しているとき、生成された JavaScript ファイルをファイル エクスプローラーや検索結果で見たくないことがよくあります。VS Code は files.exclude ワークスペース設定でフィルタリング機能を提供しており、これらの派生ファイルを非表示にする式を簡単に作成できます。
**/*.js: { "when": "$(basename).ts" }
このパターンは任意の JavaScript ファイル (**/*.js) に一致しますが、同じ名前の兄弟 TypeScript ファイルが存在する場合に限ります。ファイル エクスプローラーは、JavaScript が同じ場所にコンパイルされている場合、派生リソースを表示しなくなります。
ワークスペースのルートにある .vscode フォルダー内のワークスペース settings.json ファイルにフィルター付きの files.exclude 設定を追加します。コマンド パレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) の **[Preferences: Open Workspace Settings (JSON)]** コマンドでワークスペース settings.json を開くことができます。
.ts と .tsx の両方のソース ファイルから生成された JavaScript ファイルを除外するには、この式を使用します。
"files.exclude": {
"**/*.js": { "when": "$(basename).ts" },
"**/**.js": { "when": "$(basename).tsx" }
}
これはちょっとしたトリックです。検索のグロブ パターンがキーとして使用されます。上記の設定では、2 つの異なるグロブ パターンを使用して 2 つの一意のキーを提供していますが、検索は依然として同じファイルに一致します。
新しい TypeScript バージョンの使用
VS Code には TypeScript 言語サービスの最新の安定バージョンが同梱されており、デフォルトでこれを使用してワークスペースで IntelliSense を提供します。ワークスペース バージョンの TypeScript は、*.ts ファイルをコンパイルするために使用する TypeScript のバージョンとは独立しています。ほとんどの一般的なケースでは、VS Code の組み込み TypeScript バージョンを IntelliSense に使用するだけで心配ありませんが、VS Code が IntelliSense に使用する TypeScript のバージョンを変更する必要がある場合もあります。
これを行う理由には以下が含まれます:
- TypeScript のナイトリー ビルド (
typescript@next) に切り替えて、最新の TypeScript 機能を試す。 - IntelliSense に使用する TypeScript のバージョンと、コードのコンパイルに使用するバージョンが同じであることを確認する。
アクティブな TypeScript のバージョンとそのインストール場所は、TypeScript ファイルを表示しているときに言語ステータス バーからバージョン番号をピン留めすると、ステータス バーに表示できます。
ワークスペースのデフォルトの TypeScript バージョンを変更したい場合、いくつかの選択肢があります。
ワークスペースバージョンの TypeScript を使用する
ワークスペースに特定の TypeScript バージョンがある場合、TypeScript または JavaScript ファイルを開き、ステータス バーの TypeScript バージョン番号をクリックすることで、ワークスペース バージョンの TypeScript と VS Code がデフォルトで使用するバージョンを切り替えることができます。VS Code がどのバージョンの TypeScript を使用すべきかを尋ねるメッセージ ボックスが表示されます。
これを使用して、VS Code に付属の TypeScript バージョンとワークスペースの TypeScript バージョンを切り替えます。**[TypeScript: Select TypeScript Version]** コマンドで TypeScript バージョン セレクターをトリガーすることもできます。
VS Code は、ワークスペースのルートにある node_modules 以下にインストールされているワークスペース バージョンの TypeScript を自動的に検出します。ユーザーまたはワークスペースの設定で typescript.tsdk を構成することで、VS Code にどのバージョンの TypeScript を使用するかを明示的に伝えることもできます。typescript.tsdk 設定は、TypeScript の tsserver.js ファイルを含むディレクトリを指している必要があります。TypeScript のインストール場所は npm list -g typescript を使用して見つけることができます。tsserver.js ファイルは通常 lib フォルダーにあります。
例
{
"typescript.tsdk": "/usr/local/lib/node_modules/typescript/lib"
}
ヒント: 特定の TypeScript バージョンを取得するには、npm install 中に
@versionを指定します。例えば、TypeScript 3.6.0 の場合はnpm install --save-dev typescript@3.6.0を使用します。TypeScript の次のバージョンをプレビューするには、npm install --save-dev typescript@nextを実行します。
これらの例では typescript.tsdk が typescript 内の lib ディレクトリを指していますが、typescript ディレクトリは TypeScript の package.json ファイルを含む完全な TypeScript インストールでなければならないことに注意してください。
特定のワークスペースで特定のバージョンの TypeScript を使用するように VS Code に指示することもできます。そのためには、tsserver.js ファイルのディレクトリを指す typescript.tsdk ワークスペース設定を追加します。
{
"typescript.tsdk": "./node_modules/typescript/lib"
}
typescript.tsdk ワークスペース設定は、ワークスペースバージョンの TypeScript が存在することを VS Code に伝えるだけです。実際にワークスペースバージョンを IntelliSense に使用し始めるには、**[TypeScript: Select TypeScript Version]** コマンドを実行し、ワークスペースバージョンを選択する必要があります。
TypeScript ナイトリービルドの使用
VS Code で最新の TypeScript 機能を試す最も簡単な方法は、JavaScript and TypeScript Nightly 拡張機能をインストールすることです。
この拡張機能は、VS Code の組み込み TypeScript バージョンを自動的に最新の TypeScript ナイトリー ビルドに置き換えます。**[TypeScript: Select TypeScript Version]** コマンドで TypeScript バージョンを構成している場合は、必ず VS Code の TypeScript バージョンの使用に戻すようにしてください。
TypeScript と JavaScript の混合プロジェクト
TypeScript と JavaScript が混在するプロジェクトを持つことが可能です。TypeScript プロジェクト内で JavaScript を有効にするには、tsconfig.json で allowJs プロパティを true に設定します。
ヒント:
tscコンパイラはjsconfig.jsonファイルの存在を自動的に検出しません。tscにjsconfig.jsonファイルを使用させるには–p引数を使用します。例:tsc -p jsconfig.json。
大規模なプロジェクトでの作業
数百または数千の TypeScript ファイルを含むコードベースで作業している場合、VS Code での編集体験とコマンドラインでのコンパイル時間の両方を改善するために実行できるいくつかの手順があります。
tsconfig には関心のあるファイルのみが含まれていることを確認する
プロジェクトの tsconfig.json で include または files を使用して、プロジェクトに含めるべきファイルのみが含まれるようにします。
プロジェクトの tsconfig.json の設定に関する詳細情報。
プロジェクト参照を使用してプロジェクトを分割する
ソース コードを単一の大きなプロジェクトとして構成する代わりに、プロジェクト参照を使用して小さなプロジェクトに分割することで、パフォーマンスを向上させることができます。これにより、TypeScript はコードベース全体をロードするのではなく、一度にコードベースのサブセットのみをロードできます。
プロジェクト参照の使用方法とそれらを扱うためのベストプラクティスについては、TypeScript ドキュメントを参照してください。
次のステップ
さらに読む
- TypeScript の編集 - TypeScript に特化した編集機能です。
- TypeScript のリファクタリング - TypeScript 言語サービスから提供される便利なリファクタリングです。
- TypeScript のデバッグ - TypeScript プロジェクトのデバッガーを構成します。
よくある質問
TypeScript の "Cannot compile external module" エラーを解決するにはどうすればよいですか？
そのエラーが発生した場合は、プロジェクトのルート フォルダーに tsconfig.json ファイルを作成して解決します。tsconfig.json ファイルを使用すると、Visual Studio Code が TypeScript コードをどのようにコンパイルするかを制御できます。詳細については、tsconfig.json の概要を参照してください。
TypeScript プロジェクトをコンパイルしたときと VS Code で表示されるエラーや警告が異なるのはなぜですか？
VS Code には TypeScript 言語サービスの最新の安定バージョンが同梱されており、お使いのコンピューターにグローバルにインストールされている、またはワークスペースにローカルにインストールされている TypeScript のバージョンと一致しない場合があります。そのため、コンパイラの出力とアクティブな TypeScript 言語サービスによって検出されたエラーとの間に違いが見られることがあります。一致する TypeScript バージョンのインストールに関する詳細は、新しい TypeScript バージョンの使用を参照してください。
VS 2022 に同梱されている TypeScript のバージョンを使用できますか？
いいえ、Visual Studio 2019 および 2022 に同梱されている TypeScript 言語サービスは VS Code と互換性がありません。npm から別のバージョンの TypeScript をインストールする必要があります。
一部のエラーが警告として報告されるのはなぜですか？
デフォルトでは、VS Code の TypeScript はコード スタイルの問題をエラーではなく警告として表示します。これは以下に適用されます。
- 変数が宣言されているが、使用されていない
- プロパティが宣言されているが、その値が読み取られていない
- 到達不能なコードが検出された
- 未使用のラベル
- switch 文のフォールスルー case
- すべてのコード パスが値を返すわけではない
これらを警告として扱うことは、TSLint などの他のツールと一致しています。コマンドラインから tsc を実行すると、これらは引き続きエラーとして表示されます。
この動作を無効にするには、ユーザー設定で "typescript.reportStyleChecksAsWarnings": false を設定します。