TypeScriptを使ってみる

TypeScriptは静的型付けやクラスベースのオブジェクト指向を実現しているのが特長で、JavaScriptの大規模なアプリケーション開発などで便利なプログラミング言語です。
今回はこのTypeScriptを試してみたいと思います。

使い方

まずはTypeScriptをインストールします。
Node.jsを使用するので、事前にインストールしておいてください。

コマンドプロンプトを起動し、TypeScriptをインストールします。

npm install -g typescript

TypeScriptのインストールが完了したら、作業用のディレクトリを作成します。
作成後、そのディレクトリへ移動します。

cd ディレクトリ名

作業ディレクトリにTypeScriptのファイルを作成します。
今回はhelloworld.tsというファイルを作成しました。

helloworld.tsで以下のように記述します。

helloworld.ts

function greeter(person) {
	return "Hello, " + person;
}

var user = 'Kato';

alert(greeter(user));

helloworld.tsを保存後、コマンドプロンプトでコンパイルを実行します。

tsc helloworld.ts

作業ディレクトリ内にhelloworld.jsというファイルが生成されたら成功です。
以下のような中身のファイルが生成されました。

helloworld.js

function greeter(person) {
    return "Hello, " + person;
}
var user = 'Kato';
alert(greeter(user));

TypeScriptのコンパイルのデモページ
　

型の定義

helloworld.ts内の関数の引数に型を定義してみます。
greeter()の引数personの後に「: string」を追加します。

helloworld.ts

function greeter(person: string) {
	return "Hello, " + person;
}

var user = 'Kato';

alert(greeter(user));

引数にstring型を指定しました。
この状態でコンパイルを実行すると、引数の値は’Kato’で文字列なので、先ほどと同様の内容が生成されます。
string型を指定のデモページ

次に引数の値をnumber型に変更してみます。

helloworld.ts

function greeter(person: string) {
	return "Hello, " + person;
}

var user = 123;

alert(greeter(user));

この状態でコンパイルを実行すると、以下のようなエラーが表示されました。

helloworld.ts(7,15): error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.

これは関数の引数にstring型を定義しているのに対して、実際の引数の値がnumber型であるためです。
エラーは表示されていますが、ファイルの生成自体は行われているので注意が必要です。
number型を指定のデモページ
　

interface

先ほどのサンプルをさらに変更して、interfaceを利用してみます。

helloworld.ts

interface Person {
	firstName: string;
	lastName: string;
}

function greeter(person: Person) {
	return "Hello, " + person.firstName + " " + person.lastName;
}

var user = { firstName: "Megumi", lastName: "Kato" };

alert(greeter(user));

コンパイルを実行すると、以下のように生成されました。

helloworld.js

function greeter(person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
var user = { firstName: "Megumi", lastName: "Kato" };
alert(greeter(user));

interfaceのデモページ
　

class

classを利用してみます。

helloworld.ts

class Student {
	profile: string;
	constructor(public firstName, public lastName, public age) {
		this.profile = firstName + " " + lastName + " (" + age + ")";
	}
}

interface Person {
	firstName: string;
	lastName: string;
}

function greeter(person: Person) {
	return "Hello, " + person.firstName + " " + person.lastName;
}

var user = new Student("Megumi", "Kato", 17);

alert(greeter(user));
alert(user.profile);

helloworld.js

var Student = (function () {
    function Student(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
        this.profile = firstName + " " + lastName + " (" + age + ")";
    }
    return Student;
}());
function greeter(person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
var user = new Student("Megumi", "Kato", 17);
alert(greeter(user));
alert(user.profile);

classのデモページ
　

【参考サイト】

• TypeScript – JavaScript that scales.
• 「静的型付けが出来るJavaScriptの上位言語」を触ってみよう。パート1 – TypeScript #1 – hounobouno