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」を入力してクリック
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643549/85593008-48a0-c8c5-fc7c-ecb08767af12.png)

3.「Install additional languages」を選択
「Configure Display Language」をクリック語表示された「Install additional languages」をクリック
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643549/f99740d9-6d39-16f8-a8f3-4c346e4a4bf2.png)

4.「Japanese Language Pack for Visual Studio Code」をインストール
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643549/b9e01d06-0e6d-7d55-cdca-4f136150a63e.png)

5.再起動して日本語になっていることを確認
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643549/bd334791-44a2-db04-f037-34b1d4b5408d.png)

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

1.インストール確認
「Node.js command prompt」に「node --version」を入力しバージョンが表示されていればOK
「Node.js command prompt」はタスクバーで検索すれば出てくる
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643549/92967b00-6833-5c52-0a99-bace4eb78d14.png)

##TypeScriptのインストール
1.コマンドプロンプトに「npm install -g typescript」を入力し実行
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643549/39f35a44-2d81-846d-2317-8fb18ff6279d.png)

2.インストール確認
コマンドプロンプトに「tsc-v」を入力しバージョンが表示されていればOK
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643549/45a4c683-bc05-18e1-6aee-88678b14ce79.png)

##動作確認
1.ソース保存用のフォルダを作成
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643549/e498f986-051c-b7be-5380-02c6f51a1ce3.png)

2.「tsconfig.json」ファイルを作成
作成さしたフォルダのディレクトリに移動して
コマンドプロンプトに「tsc -init」を入力し「tsconfig.json」ファイルを作成
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643549/b2bcce94-b0c5-6e83-b601-6a55661056fe.png)

2.TypeScriptファイルを作成
作成したソース保存用フォルダ直下にファイル名「samole.ts」で作成（typescriptの拡張子は「.ts」）
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643549/e43abc63-c537-0119-afb0-03cade797299.png)

3.TypeScriptファイルをコンパイル（実行可能なファイルにする）
コマンドプロンプトに「tsc」を入力しコンパイルする
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643549/46360683-5a4e-f595-30e5-041bb541cdfe.png)
コンパイル成功でJavaScriptファイルが作成される
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643549/f8b3b4f5-91ce-6dd0-71ab-d20624f86765.png)

4.ファイルを実行
コマンドプロンプトに「node sample.js」を入力しTypeScriptファイルに記述した「test」が表示されればOK
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643549/e8e6b83c-91ab-6217-880e-ccb63d94dc0f.png)


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

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

```json: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」 ファイルが生成される

```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」ファイルが生成される

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

6.TypeScriptファイルを作成

```typescript:sample.ts
let msg:string =  "test";
console.log(msg);
```

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

![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643549/beb2fa73-a543-3cb9-7c8f-e7561e7a72be.png)