TypeScriptのトランスパイル

TypeScriptは、プレーンなJavaScriptにトランスパイルされる、型定義されたJavaScriptのスーパーセット（超集合）です。クラス、モジュール、インターフェースを提供し、堅牢なコンポーネントの構築を支援します。

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

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

TypeScript をインストールする最も簡単な方法は、Node.js パッケージマネージャーである npm を介することです。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バージョンを確認できます。

この記事の後半では、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つの利点は、エラーと警告の検出機能が統合され、問題（Problems）パネルに表示されることです。シンプルな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ビルドの実行

グローバルメニューの「ターミナル（Terminal）」から「ビルドタスクの実行（Run Build Task）」（⇧⌘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ビルドタスクをデフォルトのビルドタスクとして定義して、「ビルドタスクの実行（Run Build Task）」（⇧⌘B（Windows、Linux Ctrl+Shift+B））をトリガーしたときに直接実行されるようにすることもできます。これを行うには、グローバルメニューの「ターミナル」から「デフォルトのビルドタスクの構成（Configure Default Build Task）」を選択します。これにより、利用可能なビルドタスクが含まれるピッカーが表示されます。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のタスクシステムは、問題マッチャー（problem matcher）を通じてビルドの問題を検出することもできます。問題マッチャーは、特定のビルドツールに基づいてビルド出力を解析し、統合された問題の表示とナビゲーションを提供します。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+`））に表示され、ターミナルビューのドロップダウンで「タスク - 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（workspace setting）を使用したフィルタリング機能を提供しており、簡単な式を作成するだけで、これらの派生ファイルを非表示にできます。

**/*.js: { "when": "$(basename).ts" }

このパターンは、すべてのJavaScriptファイル（**/*.js）に一致しますが、同じ名前の兄弟関係にあるTypeScriptファイルが存在する場合に限られます。JavaScriptファイルが同じ場所にコンパイルされている場合、エクスプローラーには派生リソースが表示されなくなります。

ワークスペースのルートにある.vscodeフォルダー内のワークスペースsettings.jsonファイルに、フィルターを指定してfiles.exclude設定を追加します。ワークスペースsettings.jsonを開くには、コマンドパレット（⇧⌘P（Windows、Linux Ctrl+Shift+P））から「基本設定: ワークスペース設定を開く (JSON)（Preferences: Open Workspace Settings (JSON)）」コマンドを実行します。

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

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

これはちょっとしたコツです。検索のglobパターンがキーとして使用されます。上記の設定では、2つの異なるglobパターンを使用して2つの固有のキーを提供していますが、検索は依然として同じファイルに一致します。

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

VS Codeには、TypeScript言語サービスの最新の安定版が同梱されており、デフォルトでこれを使用してワークスペース内のインテリセンス（IntelliSense）を提供します。ワークスペースの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: Select TypeScript Version）」コマンドを使用して、TypeScriptバージョンセレクターを起動することもできます。

VS Codeは、ワークスペースのルートにあるnode_modules以下にインストールされているワークスペースバージョンのTypeScriptを自動的に検出します。ユーザー設定またはワークスペース設定でjs/ts.tsdk.pathを構成することにより、使用するTypeScriptのバージョンを明示的にVS Codeに指定することもできます。js/ts.tsdk.path設定は、TypeScriptのtsserver.jsファイルが含まれるディレクトリを指している必要があります。TypeScriptのインストール場所は、npm list -g typescriptを使用して確認できます。tsserver.jsファイルは通常、libフォルダーにあります。

例えば

{
  "js/ts.tsdk.path": "/usr/local/lib/node_modules/typescript/lib"
}

ヒント: 特定のTypeScriptバージョンを取得するには、npmのインストール時に@versionを指定します。たとえば、TypeScript 3.6.0の場合は、npm install --save-dev typescript@3.6.0を使用します。TypeScriptの次期バージョンをプレビューするには、npm install --save-dev typescript@nextを実行します。

これらの例では、js/ts.tsdk.pathがtypescript内のlibディレクトリを指していますが、typescriptディレクトリはTypeScriptのpackage.jsonファイルを含む完全なTypeScriptのインストール先である必要があります。

また、tsserver.jsファイルのディレクトリを指すjs/ts.tsdk.pathワークスペース設定を追加することで、特定のワークスペースで特定のバージョンのTypeScriptを使用するようVS Codeに指定することもできます。

{
  "js/ts.tsdk.path": "./node_modules/typescript/lib"
}

js/ts.tsdk.pathワークスペース設定は、ワークスペースバージョンのTypeScriptが存在することをVS Codeに伝えるだけです。実際にインテリセンスにワークスペースバージョンを使用し始めるには、「TypeScript: TypeScript バージョンの選択」コマンドを実行し、ワークスペースバージョンを選択する必要があります。

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

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

この拡張機能は、VS Codeの組み込みのTypeScriptバージョンを自動的に最新のTypeScriptナイトリービルドに置き換えます。「TypeScript: TypeScript バージョンの選択」コマンドでTypeScriptバージョンを構成したことがある場合は、忘れずにVS Code of 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の構成に関する詳細情報。

プロジェクト参照を使用してプロジェクトを分割する

ソースコードを1つの大きなプロジェクトとして構成する代わりに、プロジェクト参照（project references）を使用して小さなプロジェクトに分割することで、パフォーマンスを向上させることができます。これにより、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文でのフォールスルー
• すべてのコードパスが値を返すわけではありません

これらを警告として扱うことは、TSLintなどの他のツールと一貫性があります。コマンドラインからtscを実行した場合は、これらは引き続きエラーとして表示されます。

ユーザー設定で"js/ts.reportStyleChecksAsWarnings": falseを設定することで、この動作を無効にできます。