HTML5テクニカルノート

TypeScript: とにかくJavaScriptファイルをビルドしてみる

ID: FN1609001
Technique: HTML5 / JavaScript
Package: TypeScript 2.0.3

「TypeScript」はマイクロソフトが開発したオープンソースの無償プログラミング言語です。JavaScriptに静的型づけとクラスベースのオブジェクト指向を加えたスーパーセットとなっています。TypeScriptでコードを書いてJavaScriptファイルをビルド(書き出し)するまでには、整えなければならない環境や予備知識が求められます。本稿では、そうした準備をできるかぎり少なくして、TypeScriptの簡単なコードを動かしてみます。

01 TypeScriptをインストールする

TypeScriptは「npm」(Node Package Manager)でインストールします。そのため、あらかじめNode.jsをインストールしておいてください(「React入門 03: データはJSON形式にしてページをローカルサーバーで表示する」02「チュートリアルのサンプルファイルとNode.jsのインストール」参照)。TypeScriptのパッケージは、コマンドラインツール(OS Xならターミナル、WindowsはNode.js command promptなど)を開いて、npmのコマンドでつぎのようにグローバルにインストールします。


npm install -g typescript

このとき、「Please try running this command again as root/Administrator.」というエラーが出た場合は、管理者権限でコマンドを実行します。OS Xではつぎのように頭にsudoターミナルコマンドを加えてください。


sudo npm install -g typescript

TypeScriptのファイルは拡張子を.tsとします。JavaScriptファイルをビルドするには、コマンドラインツールでTypeScriptファイルを納めたディレクトリに切り替えてから(cdコマンド)、つぎのようにtscコマンドにファイルを定めます。すると、同じ名前の拡張子.jsのファイルがつくられます。これをHTMLドキュメントに<script>要素で読み込めば動きます。


tsc ファイル名.ts

02 TypeScriptで簡単なコードを書いてビルドする

sample.tsというTypeScriptファイルをつくって、つぎのような簡単なコードを書きます。エディタは何でも構いません。見ておわかりのとおり、これは標準的なJavaScriptコードです。TypeScriptを使ったからといって、特有の記述を加えなければならないことはありません。


function createPoint(x, y) {
	return {x: x, y: y};
}
console.log(createPoint(3, 4));

コマンドラインツールでTypeScriptファイルを保存したディレクトリに切り替え、つぎのようにtscコマンドを打ち込みます。


tsc sample.ts

これで、sample.jsというJavaScriptファイルができ上がります。前述のとおり標準的な記述ですので、ホワイトスペースが少し違うだけの同じコードが書かれているはずです。HTMLドキュメントに<script>要素でファイルを読み込み、ブラウザのコンソールを開けば、JavaScriptコードでつくられたオブジェクトが示されるでしょう(図001)。


<script src="sample.js"></script>

図001■ChromeのJavaScriptコンソールに示されたオブジェクトの情報

03 変数と関数に型づけする

TypeScriptでは変数や関数の引数および戻り値にコロン(:)で型を定めることができます。たとえば、以下のコードの変数(value)は文字列(string)で型づけされています。ところが、そこに数値を代入していますので、tscコマンドでビルドしようとすると、つぎのようなエラーが示されます。数値はstring型の変数には入れられないということです。

Type 'number' is not assignable to type 'string'.


var value: string = 3;

関数の引数にも、同じように型を与えることができます。以下の関数呼び出しは、第1引数に文字列型(string)の値を渡しているため、引数に定めた数値型(number)に合わないとして、tscコマンドでつぎのようなエラーが起こります。

Argument of type 'string' is not assignable to parameter of type 'number'.


function createPoint(x: number, y: number) {
	return {x: x, y: y};
}
var value: string = 'a';
console.log(createPoint(value, 4));

関数の戻り値は、引数を定めた括弧()のあとに加えます。つぎの関数は、戻り値が正しく型づけされています。


function createPoint(x: number, y: number): Object {
	return {x: x, y: y};
}

エラーが出ないように正しく型づけされたTypeScriptとビルドされたJavaScriptの中身をつぎのコード001にまとめました。型はビルドのときに確かめられるので、つくられたJavaScriptコードにはその定めは残りません。

コード001■エラーのないよう型づけされたTypeScriptとビルドされたJavaScriptのコード

TypeScript


function createPoint(x: number, y: number): Object {
	return {x: x, y: y};
}
var value: number = 3;
console.log(createPoint(value, 4));

JavaScript


function createPoint(x, y) {
    return { x: x, y: y };
}
var value = 3;
console.log(createPoint(value, 4));

04 TypeScriptサイトのPlayground

TypeScriptサイトの「Playground」というページでは、TypeScriptとビルドされたJavaScriptのコードがその場で見比べられます。サンプルはいくつか用意されていて、それらに手を加えてもよいですし、新たに書き直しても構いません。すぐにビルドされて、サーバー上で動きも確かめられます。構文や機能を手軽に試したいときは便利でしょう。

作成者: 野中文雄
更新日: 2016年9月23日 TypeScriptのバージョンを2.0.3に更新。
作成日: 2016年8月30日