TypeScriptをVSCodeで

Node.jsをインストールし、WindowsでTypeScript環境を整える。
今回は大規模な開発ではなく、1つのTSファイルを生成しNode.jsにて実行することを想定した設定とした。

また、TypeScriptはOS領域に入れるのではなく、プロジェクト内にインストールする。

Node.jsインストール

Node.jsのインストーラをダウンロードし実行。
https://nodejs.org/ja/download/

サイレントインストール
https://gist.github.com/manuelbieh/4178908

REM インストールログをlog.txtに書きつつ、ユーザインタラクションなしで実行する
REM オプションの詳細は"msiexec /h"を確認
msiexec /qn /l* log.txt /i node-v6.11.3-x64.msi

インストールが終わると、PATH環境変数にnodeやnpmコマンドへのパスが追加されている。

プロジェクトフォルダ作成およびTypeScriptインストール

OS領域にTypeScriptをインストールするのではなく、開発するプロジェクト専用にインストールする。

SET nameProject="MyProject"
mkdir %nameProject%
cd %nameProject%


REM NPM設定を行い、package.jsonを作る
npm init



REM TypeScriptインストール
REM node_modulesフォルダが自動生成され、そこに関連ファイルが置かれる。
npm install typescript tslint --save-dev



REM 動作確認
.\node_modules\.bin\tsc -v

VSCode設定

VisualStudioCodeでTypeScriptをJavaScript化し、デバッグする。
先に作成したプロジェクトフォルダをVSCodeで開く。

タスクの設定 tasks.json

Ctl+Shift+Pを押してコマンドパレットを開き、configure task runnerと入力。
選択肢がいくつか出てくるが、その中の”TypeScript – tsconfig.json”を選ぶ。
すると.vscode\tasks.json が生成される。

自動生成されたtasks.jsonは、プロジェクトフォルダ内のtscを参照していないのでそのままではエラーになるため
プロジェクトフォルダ内のtscを使う様、以下の修正を行う。

5c5
<     "command": "tsc",
---
>     "command": "${workspaceRoot}\\node_modules\\.bin\\tsc",

tsconfig.json

tsconfig.jsonを生成する。

.\node_modules\.bin\tsc --init

生成されたtsconfig.jsonをこのように書き換える。

11c11
<     // "sourceMap": true,                     /* Generates corresponding '.map' file. */
---
>     "sourceMap": true,                        /* Generates corresponding '.map' file. */
22c22
<     "strict": true                            /* Enable all strict type-checking options. */
---
>     "strict": true,                            /* Enable all strict type-checking options. */
53c53,61
<   }
---
>
>     "watch": true
>   },
>   "include": [
>     "*.ts"
>   ],
>   "exclude": [
>     "node_modules"
>   ]

プログラム Startup.ts

TypeScriptファイルを作成し、コードを書く。
今回はこちらにある用にStartup.tsを準備した。

class Startup {
    public static main(): number {
        console.log('Hello World');
        return 0;
    }
}

Startup.main();

基本的に.tsの拡張子を.jsに変更した名前で生成されるので、Node.jsの実行対象は今回でいうとStartup.jsとなる。
以下、Startup.jsを実行するよう構成を設定する。

構成 launch.json

構成からNode.jsを選択する。
すると.vscode/launch.jsonが自動で生成される。

まずTypeScriptのコード上でデバッグできるよう、以下の通り修正する。

12,13c12,14
<             "program": "${workspaceRoot}\\index.js",
<             "outFiles": []
---
>             "program": "${workspaceRoot}\\Startup.js",
>             "outFiles": [],
>             "sourceMaps": true

ビルド&デバッグ

VSCode上でCtl+Shift+Bでビルドを開始する。
tsconfig.jsonにおいて”watch” = trueにしたので、1回ビルドを開始すると.tsファイルが更新される度に自動でビルドしてくれる。

ソースマップファイルの生成を有効にしたので、TypeScript上で設定したブレイクポイントも有効に作用する。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です