TypeScriptとは

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

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

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

実行環境

とりあえず気軽に試したい

公式HPのplaygroundがオススメ。
https://www.typescriptlang.org/play

ちゃんとした環境を作りたい

以下のバージョンを前提にします。

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の生成を有効にしておきましょう。

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

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

VSCodeを起動して、Open Folderから作業ディレクトリ（C:\work）を開いておきます。

作業ディレクトリが開けたら、
VSCodeのメニューから、Terminal → Configure Default Build Task...と進み、

tsc:build - tsconfig.json を選びます。

すると、ビルドタスク用の設定ファイル（./.vscode/tasks.json）が生成されます。

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

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

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

 console.log('hoge');

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

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

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

VSCodeから、Run->Add Configuration...と進み、

Node.jsを選びます。

すると、launch.jsonが生成されます。

programのところを、先ほど作ったファイル名（test.ts）に書き換えてておきます。

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

コンソールにこのように表示されれば成功です。

参考にしたサイト

TypeScript (Official HP)
Visual Studio CodeではじめるTypeScript入門