TypeScriptは、発表当時に少し触ってみたものの、実用にはならないかなと様子見をしていました。しかし、ここ最近、実務で導入されている例が多くなってきたり、ECMA Script 6の勧告に伴って、話題に上がることが多くなったりで、遅ればせながら改めて学習を開始しました。
ということで、まずは導入の方法を紹介してみます。ムービーはこちら。
ここでは、Windows 10への導入方法を紹介しますが、基本的にはコマンドラインソフトなので、OS Xなどでもほぼ同様の手順です。
Node.jsをインストール
TypeScriptは、npmコマンドでインストールする事ができます。そのため、まずは Node.jsをインストールしておきましょう。Windowsの場合は、サイトからセットアッププログラムをダウンロードしてインストールするのが簡単です。
TypeScriptをインストール
続いて、コマンドプロンプトを起動します。左下の Windowsボタンを右クリックして「コマンドプロンプト」を起動しましょう。出てきた画面に、次のように打ち込みます。
npm install -g typescript
これは、npm(Node Package Manager)というパッケージ管理のツールを利用して、TypeScriptをインストールするというコマンドです。「-g」というオプションは、「Global Mode」の略称でシステム全体にパッケージをインストールするということです。
これで、TypeScriptが利用できるようになり「tsc」というコマンドが利用できるようになりました。TypeScript Compileの略称で、「コンパイル(TypeScriptのコードを JavaScriptに変換する)」というコマンドですね。
ソースを作る
では次に、TypeScriptのソースを作って行きましょう。エディタは、VisualStudio Codeなどが良いでしょう。次のようなソースを作ります。
let hello = 'Hello World!';
console.log(hello);
「Hello World」という文章を表示するために、「hello」という変数に代入してコンソールに表示しています。ほぼ、JavaScriptと同様です。ただ、変数の宣言部分が「var」ではなく、「let」になっています。
ではこれをコンパイルしてみましょう。デスクトップなどに「hello.ts」というファイル名で保存します。
コンパイルする
コマンドプロンプトで、ソースの場所に移動したら(例: cd Desktop)、次のコマンドを打ち込みます。
tsc hello.ts
すると、同じ場所に「hello.js」というファイルができあがっているはずです。ファイルは次のようになっています。
var hello = 'Hello World!';
console.log(hello);
「let」だった場所が、「var」に変わっています。TypeScriptでは、変数宣言に新しく「let」と「const」が利用できるようになっています。しかし、JavaScriptでは利用できないため、これを変換してくれるというわけです。(詳しくは別の機会に)
これで、学習環境が整いました。がんばって勉強します! 読んでいる書籍はこちらです。