Visual Studio Code での 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

Hello World

簡単な Hello World Node.js の例から始めましょう。新しいフォルダー HelloWorld を作成し、VS Code を起動します。

mkdir HelloWorld
cd HelloWorld
code .

ファイルエクスプローラーから、helloworld.ts という新しいファイルを作成します。

次に、以下の TypeScript コードを追加します。TypeScript のキーワード let と string 型宣言に注目してください。

let message: string = 'Hello World';
console.log(message);

TypeScript コードをコンパイルするには、統合ターミナル (⌃` (Windows、Linux Ctrl+`)) を開き、tsc helloworld.ts と入力します。これにより、コンパイルされ、新しい helloworld.js JavaScript ファイルが作成されます。

Node.js がインストールされている場合は、node helloworld.js を実行できます。

helloworld.js を開くと、helloworld.ts とそれほど変わらないことがわかります。型情報は削除され、let は var になっています。

var message = 'Hello World';
console.log(message);

IntelliSense

VS Code では、構文の強調表示や括弧のマッチングなどの言語機能が利用できます。エディターで入力しているときに、VS Code と TypeScript 言語サーバーが提供するスマートなコード補完と提案である IntelliSense に気づいたかもしれません。以下に console のメソッドを示します。

メソッドを選択すると、パラメーターのヘルプが表示され、常にホバー情報を取得できます。

tsconfig.json

このチュートリアルではこれまで、TypeScript ソースコードをコンパイルするために TypeScript コンパイラーのデフォルトの動作に頼ってきました。コンパイラーオプションや含めるべきファイルなどの TypeScript プロジェクト設定を定義する tsconfig.json ファイルを追加することで、TypeScript コンパイラーオプションを変更できます。

重要: このチュートリアルの残りの部分で tsconfig.json を使用するには、入力ファイルなしで tsc を呼び出します。TypeScript コンパイラーは、プロジェクト設定とコンパイラーオプションのために tsconfig.json を参照することを知っています。

ES5 にコンパイルし、CommonJS モジュールを使用するようにオプションを設定する簡単な tsconfig.json を追加します。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS"
  }
}

tsconfig.json を編集する際、IntelliSense (⌃Space (Windows、Linux Ctrl+Space)) がその作業を助けてくれます。

既定では、files 属性が含まれていない場合、TypeScript は現在のフォルダーとサブフォルダー内のすべての .ts ファイルを含めるため、helloworld.ts を明示的にリストする必要はありません。

ビルド出力の変更

生成された JavaScript ファイルが TypeScript ソースと同じフォルダーにあると、大規模なプロジェクトではすぐに煩雑になるため、outDir 属性を使用してコンパイラーの出力ディレクトリを指定できます。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "outDir": "out"
  }
}

helloworld.js を削除し、オプションなしでコマンド tsc を実行します。helloworld.js が out ディレクトリに配置されていることがわかります。

TypeScript 言語サービスの他の機能や、タスクを使用して VS Code から直接ビルドを実行する方法については、「TypeScript のコンパイル」を参照してください。

エラーチェック

TypeScript は、強力な型チェックによって一般的なプログラミングミスを回避するのに役立ちます。たとえば、message に数値を代入すると、TypeScript コンパイラーは 「error TS2322: Type '2' is not assignable to type 'string'」 というエラーを報告します。VS Code では、エディター (ホバー情報付きの赤い波線) と問題パネル (⇧⌘M (Windows、Linux Ctrl+Shift+M)) の両方で型チェックエラーを確認できます。[ts] というプレフィックスは、このエラーが TypeScript 言語サービスからのものであることを示しています。

クイックフィックス

TypeScript 言語サービスには、一般的なコーディングの問題を発見するための強力な診断機能セットがあります。たとえば、ソースコードを分析して、エディターで薄暗く表示される到達不能なコードを検出できます。ソースコードの行にカーソルを合わせると、説明が表示され、その行にカーソルを置くと、クイックフィックスの電球が表示されます。

電球をクリックするか、⌘. (Windows、Linux Ctrl+.) を押すと、クイックフィックスメニューが表示され、到達不能なコードの削除修正を選択できます。

さらに、**コードアクションウィジェット: 近くのクイックフィックスを含める** (editor.codeActionWidget.includeNearbyQuickFixes) は、既定で有効になっている設定であり、その行のどこにカーソルがあっても、⌘. (Windows、Linux Ctrl+.) (コマンド ID editor.action.quickFix) から行内の最も近いクイックフィックスをアクティブ化します。

このコマンドは、クイックフィックスでリファクタリングまたは修正されるソースコードをハイライト表示します。通常のコードアクションと修正以外のリファクタリングは、カーソル位置で引き続きアクティブ化できます。

デバッグ

VS Code には TypeScript のデバッグの組み込みサポートがあります。実行中の JavaScript コードと組み合わせて TypeScript をデバッグするために、VS Code はデバッガーが元の TypeScript ソースコードと実行中の JavaScript をマッピングするためのソースマップに依存しています。tsconfig.json で "sourceMap": true を設定することで、ビルド中にソースマップを作成できます。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "outDir": "out",
    "sourceMap": true
  }
}

tsc を実行して再ビルドすると、out ディレクトリに helloworld.js の隣に helloworld.js.map が作成されます。

エディターで helloworld.ts を開いた状態で、F5 を押します。他のデバッガー拡張機能がインストールされている場合は、ドロップダウンから Node.js を選択する必要があります。

デバッガーはセッションを開始し、コードを実行し、「Hello World」メッセージをデバッグコンソールパネルに表示します。

helloworld.ts で、エディターの左側のガターをクリックしてブレークポイントを設定します。ブレークポイントが設定されると赤い円が表示されます。もう一度 F5 を押します。ブレークポイントに到達すると実行が停止し、**実行とデバッグ**ビュー (⇧⌘D (Windows、Linux Ctrl+Shift+D)) で変数やコールスタックなどのデバッグ情報を確認できます。

VS Code の TypeScript 用組み込みデバッグサポートの詳細と、プロジェクトのシナリオに合わせてデバッガーを構成する方法については、「TypeScript のデバッグ」を参照してください。

次のステップ

このチュートリアルは、VS Code を TypeScript 開発に利用するための簡単な紹介でした。引き続き読み進めて、VS Code の TypeScript 用コンパイルおよびデバッグサポートの詳細を確認してください。

• TypeScript のコンパイル - VS Code の強力なタスクシステムを利用して TypeScript をコンパイルします。
• TypeScript の編集 - TypeScript に特化した編集機能です。
• TypeScript のリファクタリング - TypeScript 言語サービスから提供される便利なリファクタリングです。
• TypeScript のデバッグ - TypeScript プロジェクトのデバッガーを構成します。

よくある質問

対応する JavaScript が見つからないため、プログラムを起動できません

おそらく tsconfig.json で "sourceMap": true を設定しておらず、VS Code の Node.js デバッガーが TypeScript ソースコードを実行中の JavaScript にマッピングできません。ソースマップを有効にしてプロジェクトを再ビルドしてください。