TypeScript を使ってみる
まず少し、 TypeScript を使ってみましょう。
次の内容を foo.ts として保存します。拡張子 .ts は TypeScript で使われる拡張子です。
class Person {
name: string;
age: number;
constructor(name: string, age: number){
this.name = name;
this.age = age;
}
sayHello(){
return `My name is ${this.name}. I'm ${this.age} years old.`;
}
}
let p = new Person('Mike', 25);
let s = p.sayHello();
document.getElementById('div1').innerHTML = s;
ざっと上のコードの説明
ここでは class によるクラスの定義、: string や : number で変数の型指定などが出てきています。 JavaScript というよりは、Java とかの方が近いようにみえるのではないでしょうか。これは TypeScript のコードです。
class キーワードで Person という名前のクラスを定義しています。
name は string 型の変数、age は number (数字) 型の変数です。 constructor はその名の通りコンストラクタで、Person オブジェクトを作成する時に呼ばれます。
sayHello は Person クラスのメソッドで文字列を返します。` と $ を使っているのは ES6 の文字列補間です。 変数の値が埋め込まれます。
let は変数の宣言で使います。var との違いについてはまた別の所で。
new キーワードで Person オブジェクトを作成。このとき名前と年齢を渡しています。
sayHello メソッドで返ってきた文字列を、ID が div1 の DOM 要素の innerHTML にセットします。
TypeScript を使う
「TypeScript」で簡単に説明したように、2017年現在主要ブラウザでサポートされているスクリプトは ES5 です。TypeScript は ES6 のスーパーセットなので、 このままでは HTML ページに組み込んで使うことはできません。
ブラウザで使うためにどうすれば良いかというと、TypeScript コンパイラ (tsc) を使えば .ts ファイルを .js にコンパイルすることができます。
$ tsc foo.ts
この結果、foo.ts から foo.js が生成されます。次のようなファイルが生成されるはずです。
var Person = (function () {
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayHello = function () {
if (this.name == this.age) {
return 'what?';
}
return "My name is " + this.name + ". I'm " + this.age + " years old.";
};
return Person;
}());
var p = new Person('Mike', 25);
var s = p.sayHello();
document.getElementById('div1').innerHTML = s;
ここでは JavaScript らしく class キーワードも型指定もなくなっています。
生成された foo.js を次のように HTML ファイル (index.html) で取り込みます。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TypeScript Test</title>
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<div id="div1"></div>
<script src="foo.js"></script>
</body>
</html>
これをブラウザから要求すると、次のように表示されます。
型指定できることでコンパイル時に間違いを見つけやすくなるとか、class キーワードによるオブジェクト指向プログラミングの実装など、 JavaScript で少々難しさがあったところが消えて使いやすくなった、と感じる人も多いのではないでしょうか。
それでは、tsc のインストールからみていきましょう。