「Visual Studio Code」を使って、TypeScriptを動かしてみるまでの流れ

# TypeScriptとは
マイクロソフトにより開発されたプログラミング言語です。

文法的にはJavaScriptのスーパーセットであり、JavaScriptに対して静的型付けやクラスといった、中・大規模開発に求められる機能が備わっています。

JavaScriptに一度変換してから実行する方式のため、既存のJavaScriptの実行環境（Node.jsや各種ブラウザ）をそのまま利用できるというメリットがあります。

# 実行環境
## とりあえず気軽に試したい
公式HPのplaygroundがオススメ。
https://www.typescriptlang.org/play

## ちゃんとした環境を作りたい
以下のバージョンを前提にします。

|項目|バージョン|
|---|---|---|
|OS|Windows 10 Home (64bit)|
|Node.js|14.15.0 LTS|
|Visual Studio Code|1.50.1|

### Node.js
最初に、JavaScriptの実行環境であるNode.jsをインストールする必要があります。Node.jsは、公式サイトからダウンロードできます。
https://nodejs.org/ja/

安定したLTS版と最新版の2つがありますが、特に理由が無ければLTS版をダウンロードすることをお勧めします。

以下のコマンドを実行し、インストールされていることを確認。

```
> node -v
v14.15.0
```

### Visual Studio Code
Visual Studio Codeをインストールします。
https://code.visualstudio.com/download

### 作業ディレクトリの作成
適当な作業ディレクトリを作成し、移動します。

```
> mkdir c:\work
> cd c:\work
```

### プロジェクトの初期化（package.json）
まずはプロジェクトの初期化を行います。

```
> npm init -y
```

これでプロジェクト設定ファイル`package.json`が生成されました。

### TypeScriptのインストール

続いて、TypeScripをインストールします。
（ここでは作業ディレクトリにインストールしていますが、システム全体に入れたい場合は`npm install typescript -g`でインストールしてください）。

```
> npm install typescript
```

### TypeScriptの設定（tsconfig.json）

次に、TypeScriptの設定ファイルを作成します。
`npx`はインストールしたnpmパッケージを実行するためのコマンド、`tsc`はTypeScript用のコンパイラ（実行ファイル）です。

```
> npx tsc --init
```

これで作業ディレクトリのルートに、`tsconfig.json`が生成されました。

各種ツールからデバッグできるようにするために、sourceMapの生成を有効にしておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/839411/794c477c-f2e0-75a6-a601-24c43259d96d.png)

### VSCodeのビルドタスクの設定 (tasks.json)

次に、VSCode（Visual Studio Code）の設定に移ります。

VSCodeを起動して、Open Folderから作業ディレクトリ（C:\work）を開いておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/839411/509efeff-9baf-83cc-3097-e04686509232.png)

作業ディレクトリが開けたら、
VSCodeのメニューから、Terminal → Configure Default Build Task...と進み、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/839411/1f925b11-ce33-ad45-eb97-86ecf8773eb4.png)
tsc:build - tsconfig.json を選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/839411/aed9c43a-7ac8-6dc7-a0f9-57e6ffa98c4a.png)
すると、ビルドタスク用の設定ファイル（./.vscode/tasks.json）が生成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/839411/b488e547-3f55-5e26-3942-97fce771322e.png)

これで、Ctrl+Shift+Bを押すことでTypeScriptのソースコードがビルドできるようになりました。

### 何か動くものを書いてみる

VSCodeから、File->New Fileと進み、下記のコードを記述します。

```ts
 console.log('hoge');
```

Ctrl+Sを押して、作業フォルダの直下に`test.ts`という名前で保存します。

### デバッグ構成ファイルの設定 (launch.json)

先ほど書いたソースコードを実行してみましょう。

VSCodeから、Run->Add Configuration...と進み、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/839411/f1bb7665-0ec0-45ff-c83f-5ea1e687a908.png)
Node.jsを選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/839411/483125b1-9bca-0aca-3595-25f94eef6175.png)
すると、launch.jsonが生成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/839411/b0f3acc9-86c0-0a1e-66af-1deb85a31974.png)
programのところを、先ほど作ったファイル名（test.ts）に書き換えてておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/839411/1c959736-124d-05e8-6590-bcc71a836881.png)

これで準備完了です。
Ctrl+Shift+Bを押してビルドを走らせたあと、F5でデバッグ実行します。

コンソールにこのように表示されれば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/839411/63f6aba2-bfc4-03b5-3575-3b3268804d50.png)

# 参考にしたサイト

[TypeScript (Official HP)](https://www.typescriptlang.org/)
[Visual Studio CodeではじめるTypeScript入門](https://www.casleyconsulting.co.jp/blog/engineer/255/)