AltJSとTypeScriptとは
昨今,
TypeScript以外にもさまざまなAltJSがあります。たとえばLL
TypeScriptの開発はC#やTurbo Pascalの開発者として有名なAnders Hejlsberg氏が中心となってMicrosoftで開発されました。
開発の中心はMicrosoftですが,
- 注1)
- 発売中のWEB+DB PRESS Plusシリーズ
「フロントエンド開発徹底攻略」 の特集3で詳しく解説しています。参考にしてください。
TypeScriptを今すぐに試してみる
TypeScriptのインストールについてはのちほど解説しますが,
TypeScriptの特徴とメリット
TypeScriptが実際にどのような言語なのか,
TypeScriptのおもな特徴は次のとおりです。
- 静的型付け言語であり,
あいまいさを回避しやすい - ECMAScriptのスーパーセットで,
かつECMA Script 6の機能を先取りしている - 変換しても平易なECMAScriptが出力される
- 既存ライブラリとの相互運用のために外部に型定義ファイルを持てる
TypeScriptの文法
TypeScriptの文法は基本的にJavaScriptの言語部分
function sayHello(message) {
alert(message);
}
sayHello("Konnichiwa!");
このTypeScript のコードを変換すると次のJavaScriptのコードになります。
function sayHello(message) {
alert(message);
}
sayHello("Konnichiwa!");
この2つのコードを比べるとわかりますが,
先ほどの変換例のとおり,
ではJavaScriptのコードをTypeScriptのコードにコピー&ペーストすればそのまま使えるかというと,
TypeScriptは静的型付け言語
TypeScriptの特徴は,
静的型付け言語とは,string
,number
などを宣言しておき,
function sayHello(message : string) {
alert(message);
}
sayHello("Konnichiwa!");
この例では,sayHello
関数は引数として文字列しか受け取れないことを示すため,: string
という宣言を追加しています。たとえば最後のsayHello
関数の呼び出しで引数に数値の1を指定してコンパイルするとstring
型を受け取るはずだけどnumber
型が渡されていて,
var message: string; // string(文字列型)の変数を定義
message = 1;
// ↑ エラー: Cannot convert 'number' to 'string'.
このように実行前のチェックが可能になるのが静的型付け言語のメリットです。静的な型付けをするメリットはのちほどもう少し詳しく紹介します。なお,
大規模開発をサポートする要素
TypeScriptには,
リスト1 モジュールの例
module Sample {
export class Greeter {
message: string;
constructor(message: string) {
this.message = message;
}
sayHelloAfterSecond(): void {
setTimeout(() => alert(this.message), 1000);
}
}
}
new Sample.Greeter('Konnichiwa!!').
sayHelloAfterSecond();
モジュールを利用すると,