Visual Studio CodeでTypeScriptの開発環境を作る方法

作成:2019.12.03 02:00 更新:2021-02-10T12:48:25Z

ここでは、Visual Studio Codeを使用したTypeScriptの開発環境を構築する手順を記載します。

TypeScriptの開発環境としてプレイグラウンドがあります。プレイグラウンドはブラウザさえあれば、TypeScriptでコーディングし、その場で実行することができます。

プレイグラウンドはとても手軽です。しかし、VSCodeは開発環境としてとても強力なため、TypeScriptの開発でもVSCodeを使いたいと思います。

また、実際の開発現場においては、開発環境としてプレイグラウンドを使うことはありません。VSCodeなどの開発環境を使用することになります。

この記事の手順を実行すれば、VSCodeを使ったTypeScriptの開発環境を構築することができます。

環境

Visual Studio Code
node.js
typescript

環境構築

開発に必要なソフトウェアをインストールしていきます。（おいおい詳細は追記していきます。）

Visual Studio Codeをインストール
node.jsをインストール
typescriptをインストール
　コマンドプロンプトで以下を実行し、typescriptをインストールします。
```
npm install -g typescript
```

ワークスペースの設定

VSCodeで[ファイル]-[フォルダを開く]を選択して作業用フォルダを開きます。
package.jsonを作成します。
　以下のコマンドを実行して、package.jsonを生成します。
```
npm init -y
```
生成されたpackage.jsonは以下のような内容です。
```
{
  "name": "TypeScript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```
ここでのポイントは、"main" : "index.js",となっている行です。このindex.jsが実行するJavaScriptのコードとなります。そのため、index.jsのもととなるTypeScriptのソースファイルはindex.tsで作成します。

もし、TypeScriptのソースファイル名を変更したい場合は、index.jsを変更します。
tsconfig.jsonを作成します。
　以下のコマンドを実行して、tsconfig.jsonを生成します。生成されたtsconfig.jsonでは以下の行がコメントアウトされているので、コメントアウトを外して有効にします。
```
"sourceMap": true, /* Generates corresponding '.map' file. */
```
上記を有効にすると、mapファイルが作成されデバッグブレークができるようになります。
ビルドタスクを設定する。
　VSCodeで[ターミナル]-[既定のビルドタスクの構成]を選択し、[tsc: ビルド - tsconfig.json]を選択します。すると、ビルドタスクファイル（tasks.json）が生成されます。

起動設定をする。

　VSCodeで[デバッグ]-[構成の追加]を選択し、[Node.js]を選択します。すると、起動設定ファイル（launch.json）が生成されます。
　
　起動前にビルドが実行されるように以下を追加します。

{
  // IntelliSense を使用して利用可能な属性を学べます。
  // 既存の属性の説明をホバーして表示します。
  // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "プログラムの起動",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}\\#02.js",
      "outFiles": [
        "${workspaceFolder}/**/*.js"
      ],
      "preLaunchTask": "tsc: ビルド - tsconfig.json", //★追加
    }
  ]
}