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

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 は、強力な型チェックによって一般的なプログラミングミスを回避するのに役立ちます。たとえば、数値 2 を 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+.) を押すとクイックフィックスメニューが表示され、到達不能なコードを削除の修正を選択できます。

さらに、Code Action Widget: Include Nearby Quick Fixes (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 にマップできません。ソースマップをオンにしてプロジェクトを再ビルドしてください。