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 コンパイラーは 'エラー TS2322: 型 '2' を型 '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 を実行してリビルドすると、helloworld.js の隣の out ディレクトリに helloworld.js.map が作成されます。

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

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

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

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

次のステップ

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

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

よくある質問

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

tsconfig.json で "sourceMap": true を設定していない可能性があり、VS Code Node.js デバッガーは TypeScript ソースコードを実行中の JavaScript にマップできません。ソースマップをオンにして、プロジェクトをリビルドしてください。