TypeScript のコンパイル
TypeScript は、プレーンな JavaScript にトランスパイルされる、型付き JavaScript のスーパーセットです。堅牢なコンポーネントを構築するのに役立つクラス、モジュール、およびインターフェースを提供します。
TypeScript コンパイラーのインストール
Visual Studio Code には TypeScript 言語サポートが含まれていますが、TypeScript コンパイラー tsc は含まれていません。TypeScript ソースコードを JavaScript にトランスパイルするには (tsc HelloWorld.ts)、TypeScript コンパイラーをグローバルまたはワークスペースにインストールする必要があります。
TypeScript をインストールする最も簡単な方法は、Node.js Package Manager である npm を使用することです。npm がインストールされている場合は、コンピューターに TypeScript をグローバル (-g) にインストールできます。
npm install -g typescript
バージョンまたはヘルプを確認して、インストールをテストできます。
tsc --version
tsc --help
別のオプションは、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: ビルド] エントリを選択します。これにより、ワークスペースに HelloWorld.js ファイルと HelloWorld.js.map ファイルが生成されます。
[tsc: 監視] を選択した場合、TypeScript コンパイラーは TypeScript ファイルの変更を監視し、変更ごとにトランスパイラーを実行します。
内部的には、TypeScript コンパイラーをタスクとして実行します。使用するコマンドは tsc -p . です。
ステップ 3: TypeScript ビルドを既定にする
TypeScript ビルドタスクを既定のビルドタスクとして定義して、[ビルドタスクの実行] (⇧⌘B (Windows、Linux Ctrl+Shift+B)) をトリガーしたときに直接実行されるようにすることもできます。これを行うには、グローバル [ターミナル] メニューから [既定のビルドタスクの構成] を選択します。これにより、使用可能なビルドタスクのピッカーが表示されます。TypeScript [tsc: ビルド] を選択すると、.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 タスクシステムは、問題 matcher を通じてビルドの問題を検出することもできます。問題 matcher は、特定のビルドツールに基づいてビルド出力を解析し、統合された問題の表示とナビゲーションを提供します。VS Code には多くの問題 matcher が付属しており、上記の tasks.json に表示されている $tsc は、TypeScript コンパイラー出力の問題 matcher です。
例として、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)) から [基本設定: ワークスペース設定を開く (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 のバージョンとは独立しています。ほとんどの一般的なケースでは、IntelliSense 用に VS Code の組み込み TypeScript バージョンを心配なく使用できますが、IntelliSense に VS Code が使用する TypeScript のバージョンを変更する必要がある場合があります。
これを行う理由は次のとおりです。
- TypeScript ナイトリービルド (
typescript@next) に切り替えて、最新の TypeScript 機能を試してみる。 - コードのコンパイルに使用する TypeScript と同じバージョンの TypeScript を IntelliSense に使用していることを確認する。
TypeScript ファイルを表示して言語ステータスバーからバージョン番号をピン留めすると、アクティブな TypeScript バージョンとそのインストール場所をステータスバーに表示できます。
ワークスペースの既定の TypeScript バージョンを変更する場合は、いくつかのオプションがあります。
ワークスペースバージョンの TypeScript を使用する
ワークスペースに特定の TypeScript バージョンがある場合は、TypeScript または JavaScript ファイルを開き、ステータスバーの TypeScript バージョン番号をクリックして、ワークスペースバージョンの TypeScript と VS Code が既定で使用するバージョンの TypeScript を切り替えることができます。VS Code で使用する TypeScript のバージョンを尋ねるメッセージボックスが表示されます。
これを使用して、VS Code に付属している TypeScript のバージョンとワークスペースにある TypeScript のバージョンを切り替えます。[TypeScript: TypeScript バージョンの選択] コマンドを使用して、TypeScript バージョンセレクターをトリガーすることもできます。
VS Code は、ワークスペースのルートにある node_modules の下にインストールされているワークスペースバージョンの TypeScript を自動的に検出します。ユーザーまたはワークスペースの設定で typescript.tsdk を構成することにより、VS Code に使用する TypeScript のバージョンを明示的に指示することもできます。typescript.tsdk 設定は、TypeScript tsserver.js ファイルを含むディレクトリを指している必要があります。npm list -g typescript を使用して 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 インストールである必要があることに注意してください。
tsserver.js ファイルのディレクトリを指す typescript.tsdk ワークスペース設定を追加することにより、特定のワークスペースで特定のバージョンの TypeScript を使用するように VS Code に指示することもできます。
{
"typescript.tsdk": "./node_modules/typescript/lib"
}
typescript.tsdk ワークスペース設定は、ワークスペースバージョンの TypeScript が存在することを VS Code に伝えるだけです。IntelliSense にワークスペースバージョンを実際に使用し始めるには、[TypeScript: TypeScript バージョンの選択] コマンドを実行し、ワークスペースバージョンを選択する必要があります。
TypeScript ナイトリービルドの使用
VS Code で最新の TypeScript 機能を試す最も簡単な方法は、JavaScript および TypeScript ナイトリー拡張機能をインストールすることです。
この拡張機能は、VS Code の組み込み TypeScript バージョンを最新の TypeScript ナイトリービルドに自動的に置き換えます。[TypeScript: TypeScript バージョンの選択] コマンドで TypeScript バージョンを構成した場合は、VS Code の TypeScript バージョンの使用に切り替えるようにしてください。
TypeScript と JavaScript の混在プロジェクト
TypeScript と JavaScript の混在プロジェクトを持つことができます。TypeScript プロジェクト内で JavaScript を有効にするには、tsconfig.json で allowJs プロパティを true に設定できます。
ヒント:
tscコンパイラーは、jsconfig.jsonファイルの存在を自動的に検出しません。–p引数を使用して、tscにjsconfig.jsonファイルを使用させます (例:tsc -p jsconfig.json)。
大規模プロジェクトの操作
数百または数千の TypeScript ファイルを含むコードベースで作業している場合は、VS Code での編集エクスペリエンスとコマンドラインでのコンパイル時間の両方を向上させるために実行できる手順をいくつか示します。
tsconfig に必要なファイルのみが含まれていることを確認する
プロジェクトの tsconfig.json で include または files を使用して、プロジェクトにプロジェクトの一部である必要があるファイルのみが含まれていることを確認します。
プロジェクトの tsconfig.json の構成に関する詳細情報。
プロジェクト参照を使用してプロジェクトを分割する
ソースコードを 1 つの大きなプロジェクトとして構造化する代わりに、プロジェクト参照を使用して小さなプロジェクトに分割することで、パフォーマンスを向上させることができます。これにより、TypeScript はコードベース全体をロードする代わりに、一度にコードベースのサブセットのみをロードできます。
プロジェクト参照の使用方法とそれらを操作するためのベストプラクティスの詳細については、TypeScript ドキュメントを参照してください。
次のステップ
以下について読み進めてください。
- TypeScript の編集 - TypeScript 固有の編集機能。
- TypeScript のリファクタリング - TypeScript 言語サービスからの便利なリファクタリング。
- TypeScript のデバッグ - TypeScript プロジェクトのデバッガーを構成します。
よくある質問
TypeScript の「外部モジュールをコンパイルできません」エラーを解決するにはどうすればよいですか?
そのエラーが発生した場合は、プロジェクトのルートフォルダーに tsconfig.json ファイルを作成して解決します。tsconfig.json ファイルを使用すると、Visual Studio Code が TypeScript コードをコンパイルする方法を制御できます。詳細については、tsconfig.json の概要を参照してください。
VS Code でエラーと警告が、TypeScript プロジェクトをコンパイルするときと異なるのはなぜですか?
VS Code には、TypeScript 言語サービスの最近の安定バージョンが付属しており、コンピューターにグローバルにインストールされている、またはワークスペースにローカルにインストールされている TypeScript のバージョンと一致しない場合があります。そのため、コンパイラーの出力と、アクティブな TypeScript 言語サービスによって検出されたエラーの間に違いが見られる場合があります。一致する TypeScript バージョンをインストールする方法の詳細については、「新しい TypeScript バージョンの使用」を参照してください。
VS 2022 に付属しているバージョンの TypeScript を使用できますか?
いいえ、Visual Studio 2019 および 2022 に付属している TypeScript 言語サービスは、VS Code と互換性がありません。npm から別のバージョンの TypeScript をインストールする必要があります。
一部のエラーが警告として報告されるのはなぜですか?
既定では、VS Code TypeScript は、コードスタイルの問題をエラーではなく警告として表示します。これは、以下に適用されます。
- 変数は宣言されていますが、使用されていません
- プロパティは宣言されていますが、その値は読み取られていません
- 到達不能コードが検出されました
- 未使用のラベル
- switch のフォールスルーケース
- すべてのコードパスが値を返すわけではありません
これらを警告として扱うことは、TSLint などの他のツールと一致しています。これらは、コマンドラインから tsc を実行すると、引き続きエラーとして表示されます。
ユーザー設定で "typescript.reportStyleChecksAsWarnings": false を設定することにより、この動作を無効にすることができます。