TypeScript で HelloWorldを作る

TypeScriptは、発表当時に少し触ってみたものの、実用にはならないかなと様子見をしていました。しかし、ここ最近、実務で導入されている例が多くなってきたり、ECMA Script 6の勧告に伴って、話題に上がることが多くなったりで、遅ればせながら改めて学習を開始しました。

ということで、まずは導入の方法を紹介してみます。ムービーはこちら。

ここでは、Windows 10への導入方法を紹介しますが、基本的にはコマンドラインソフトなので、OS Xなどでもほぼ同様の手順です。

Node.jsをインストール

TypeScriptは、npmコマンドでインストールする事ができます。そのため、まずは Node.jsをインストールしておきましょう。Windowsの場合は、サイトからセットアッププログラムをダウンロードしてインストールするのが簡単です。

Node.jsをインストール

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では利用できないため、これを変換してくれるというわけです。(詳しくは別の機会に)

これで、学習環境が整いました。がんばって勉強します! 読んでいる書籍はこちらです。

Comments

comments