TypeScriptのコンパイル

TypeScript は、プレーンな JavaScript にトランスパイルされる、型付きの JavaScript スーパセットです。堅牢なコンポーネントを構築するのに役立つクラス、モジュール、インターフェイスを提供します。

TypeScript コンパイラのインストール

Visual Studio Code は TypeScript 言語サポートを含んでいますが、TypeScript コンパイラ tsc は含まれていません。TypeScript のソースコードを JavaScript にトランスパイルするには (tsc HelloWorld.ts)、TypeScript コンパイラをグローバルまたはワークスペースにインストールする必要があります。

TypeScript をインストールする最も簡単な方法は、Node.js パッケージマネージャーである 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 バージョンが言語ステータスバー項目に表示されます。

この記事の後半で、VS Code が使用する TypeScript 言語サービスのバージョンを変更する方法について説明します。

tsconfig.json

通常、新しい TypeScript プロジェクトの最初のステップは、tsconfig.json ファイルを追加することです。tsconfig.json ファイルは、コンパイラオプションや含めるべきファイルなど、TypeScript のプロジェクト設定を定義します。これを行うには、ソースを保存したいフォルダーを開き、tsconfig.json という名前の新しいファイルを追加します。このファイル内では、インテリセンス (⌃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 ビルドをデフォルトにする

TypeScript ビルドタスクをデフォルトのビルドタスクとして定義することもできます。そうすると、ビルドタスクの実行 (⇧⌘B (Windows、Linux Ctrl+Shift+B)) をトリガーしたときに直接実行されます。これを行うには、グローバルなターミナルメニューからデフォルトビルドタスクの構成を選択します。これにより、利用可能なビルドタスクのピッカーが表示されます。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 ファイルが同じ場所にコンパイルされている場合、ファイルエクスプローラーは派生した JavaScript リソースを表示しなくなります。

ワークスペースのルートにある .vscode フォルダー内のワークスペース settings.json ファイルに、フィルター付きの files.exclude 設定を追加します。ワークスペース settings.json は、コマンドパレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) から設定: ワークスペース設定を開く (JSON) コマンドを使用して開くことができます。

.ts と .tsx の両方のソースファイルから生成された JavaScript ファイルを除外するには、この式を使用します。

"files.exclude": {
    "**/*.js": { "when": "$(basename).ts" },
    "**/**.js": { "when": "$(basename).tsx" }
}

これは少し工夫が必要です。検索のグロブパターンがキーとして使用されます。上記の「設定」は、2つの異なるグロブパターンを使用して2つのユニークなキーを提供していますが、検索は依然として同じファイルに一致します。

新しい TypeScript バージョンの使用

VS Code は、最新の安定版 TypeScript 言語サービスを搭載しており、デフォルトでこれを使用してワークスペースにインテリセンスを提供します。ワークスペースの TypeScript バージョンは、*.ts ファイルのコンパイルに使用する TypeScript のバージョンとは独立しています。ほとんどの一般的なケースでは、VS Code に組み込まれている TypeScript バージョンをインテリセンスに安心して使用できますが、インテリセンスに VS Code が使用する TypeScript のバージョンを変更する必要がある場合もあります。

これを行う理由には、次のようなものがあります。

• TypeScript のナイトリービルド (typescript@next) に切り替えて、最新の TypeScript 機能を使用してみる。
• コードのコンパイルに使用している TypeScript と同じバージョンをインテリセンスに使用していることを確認する。

TypeScript ファイルを表示した状態で、言語ステータスバーからバージョン番号を固定すると、アクティブな TypeScript バージョンとそのインストール場所がステータスバーに表示されます。

ワークスペースのデフォルトの TypeScript バージョンを変更したい場合、いくつかのオプションがあります。

ワークスペース版 TypeScript の使用

ワークスペースに特定の TypeScript バージョンがある場合、TypeScript または JavaScript ファイルを開き、ステータスバーの TypeScript バージョン番号をクリックすることで、ワークスペースの TypeScript バージョンと VS Code がデフォルトで使用するバージョンを切り替えることができます。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 ファイルを含むディレクトリを指す必要があります。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 に伝えるだけです。実際にインテリセンスにワークスペースバージョンを使用し始めるには、TypeScript: TypeScript バージョンの選択コマンドを実行し、ワークスペースバージョンを選択する必要があります。

TypeScript ナイトリービルドの使用

VS Code で最新の TypeScript 機能を試す最も簡単な方法は、JavaScript and TypeScript Nightly 拡張機能をインストールすることです。

この拡張機能は、VS Code に組み込まれている TypeScript バージョンを最新の TypeScript ナイトリービルドに自動的に置き換えます。TypeScript: TypeScript バージョンの選択コマンドで 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 の「外部モジュールをコンパイルできません」というエラーを解決するにはどうすればよいですか？

そのエラーが発生した場合は、プロジェクトのルートフォルダーに 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 を設定します。