Typescript 動作確認

Visual Studio Codeのインストール

・公式からダウンロードしてインストール
　https://code.visualstudio.com/

・日本語の設定
1.「Command Palette」を開く
メニューバーの「View」＞「Command Palette」をクリックか「Ctrl」+「Shift」+「P」を押す

2.「Configure Display Language」を選択
「Command Palette」に「Configure Display Language」を入力してクリック

3.「Install additional languages」を選択
「Configure Display Language」をクリック語表示された「Install additional languages」をクリック

4.「Japanese Language Pack for Visual Studio Code」をインストール

5.再起動して日本語になっていることを確認

Node.jsのインストール

・公式からダウンロードしてインストール
　https://nodejs.org/en/

1.インストール確認
「Node.js command prompt」に「node --version」を入力しバージョンが表示されていればOK
「Node.js command prompt」はタスクバーで検索すれば出てくる

TypeScriptのインストール

1.コマンドプロンプトに「npm install -g typescript」を入力し実行

2.インストール確認
コマンドプロンプトに「tsc-v」を入力しバージョンが表示されていればOK

動作確認

1.ソース保存用のフォルダを作成

2.「tsconfig.json」ファイルを作成
作成さしたフォルダのディレクトリに移動して
コマンドプロンプトに「tsc -init」を入力し「tsconfig.json」ファイルを作成

2.TypeScriptファイルを作成
作成したソース保存用フォルダ直下にファイル名「samole.ts」で作成（typescriptの拡張子は「.ts」）

3.TypeScriptファイルをコンパイル（実行可能なファイルにする）
コマンドプロンプトに「tsc」を入力しコンパイルする

コンパイル成功でJavaScriptファイルが作成される

4.ファイルを実行
コマンドプロンプトに「node sample.js」を入力しTypeScriptファイルに記述した「test」が表示されればOK

動作確認２

1.ソース保存用のフォルダを作成
2.「tsconfig.json」「package.json」ファイルを作成
作成したソース保存フォルダに移動し
コマンドプロンプトに「tsc -init」を入力し「tsconfig.json」」ファイルを作成
コマンドプロンプトに「npm init -y」を入力し「package.json」ファイルを作成

3.「tsconfig.json」ファイル修正
「"sourceMap": true」のコメント（//)を外す

tsconfig.json

{
  "compilerOptions": {
    // ... 略 ...

    /* Emit */
    // "declaration": true,            /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
    // "declarationMap": true,         /* Create sourcemaps for d.ts files. */
    // "emitDeclarationOnly": true,    /* Only output d.ts files and not JavaScript files. */
    "sourceMap": true,                 /* Create source map files for emitted JavaScript files. */

    // ... 略 ...
  }
}

4.「tasks.json」ファイルを追加
VSCodeのメニュー「ターミナル」>「既定のビルドタスクの構成」を選択後、「tsc:ビルド-tsconfig.json」を選択し
下記の「tasks.json」 ファイルが生成される

tasks.json

{
	"version": "2.0.0",
	"tasks": [
		{
			"type": "typescript",
			"tsconfig": "tsconfig.json",
			"problemMatcher": [
				"$tsc"
			],
			"group": {
				"kind": "build",
				"isDefault": true
			},
			"label": "tsc: ビルド - tsconfig.json"
		}
	]
}

5.「launch.json」ファイルを追加
VSCodeのメニュー 「実行」>「構成の追加」を選択後、「Node.js」を選択し
下記の「launch.json」ファイルが生成される

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${file}"
        }
    ]
}

6.TypeScriptファイルを作成

sample.ts

let msg:string =  "test";
console.log(msg);

7.デバック実行
VSCodeのメニュー 「実行」>「デバッグの開始」(F5) からデバッグ実行し動作すればOK
設定したブレークポイントの位置で一時停止することも確認