JavaScript の構文拡張: TypeScript (基本型)

TypeScript はマイクロソフトによって開発されたフリーでオープンソースのプログラミング言語である。TypeScript は JavaScript に使用するかどうかが任意の静的型付けとクラスベースオブジェクト指向を加えたスーパーセットとなっている。C# のリードアーキテクトであるアンダース・ヘルスバーグが TypeScript の開発に関わっている。
TypeScript は JavaScript の構文の拡張なので、既存の JavaScript のプログラムにわずかな修正を加えるだけでTypeScriptとして動作する。 TypeScript は大規模なアプリケーションの開発のために設計されており、互換性を確保するためコンパイルすると JavaScript を出力する。
TypeScriptは既存のJavaScriptライブラリに型情報を加えることのできるヘッダファイルをサポートしており、jQuery や Node.jsといったよく知られたライブラリに対しても型情報の恩恵をもたらすことができる。

↓ http://www.typescriptlang.org/Handbook#basic-types

TypeScript では(JavaScript とは違って)変数や関数の戻り値に型を指定することができます(指定しないこともできますが JavaScript と同じセマンティクスにするためには any という型指定を明示的にする必要があることがあります)。
以下の例は基本型(Basic Types)と呼ばれるものです。(1)はブーリアン値、(2)は数値、(3)は文字列の型を持つ変数を定義すると同時に値を代入しています。(コードA)

app.ts(コードA)

// Boolean
//(1)
var isDone: boolean = false;

//Number
//(2)
var height: number = 6;

//String
//(3)
var name: string = "bob";
name = 'smith';

コードBの(4)では、JavaScript と同じように型を指定しないで変数を定義しています。
しかしながら「height = "XYZ";」の行で「Cannot convert 'string' to 'number'.」というエラーが出てしまいます。
これは TypeScript の型推論が(1行目で)働いて height は数値型であるとコンパイラが決めつけてしまったためです。

app.ts(コードB)

//(4)
var height = 6;
height = "XYZ";

もし数値も文字列も代入する必要がある場合には型として any を指定します(コードC)。これで2行目でエラーがでなくなりました。

app.ts(コードC)

//(5)
var height: any = 6;
height = "XYZ";

↓ http://www.typescriptlang.org/Handbook#basic-types-array

TypeScript は JavaScript と同様に値の配列(Array)を扱うことができます。
配列型の記述は2通りのやり方で行うことができます。

• 最初は(6)のように要素の型に"[]"を続けて記述するやり方です。

• もう1つの方法はジェネリック配列型(Array<要素型>)を用いるやり方です((7)を参照)。

app.ts(コードD)

//Array
//(6)
var list: number[] = [1, 2, 3];
//(7)
var list: Array<number> = [1, 2, 3];

JavaScript の標準のデータ型セットに対する有用な追加事項は、”enum”(列挙型) です。C# のような言語と同様に enum は 数値の集合により親しみやすい名前を与える方法です(コードE)。

• デフォルトでは(8)のように enum はメンバーの番号付けを0から開始します。(つまり、Color.Red が0となる)
• (9)の例では最初のメンバーの値を明示的に指定することで、0ではなく1から番号付けを開始することもできます。
• さらに、(10)のように enum のすべてのメンバーの値を指定することもできます。

app.ts(コードE)

//Enum
//(8)
enum Color { Red, Green, Blue };
var c1: Color = Color.Green;

//(9)
enum Color2 { Red = 1, Green, Blue };
var c2: Color2 = Color2.Green;

//(10)
enum Color3 { Red = 10, Green = 20, Blue = 40 };
var c3: Color3 = Color3.Green;
alert(Color3[Color3.Blue]); // "Blue" と表示される

• "void" は、値を返さない関数の戻り値型として用います(コードF)。

app.ts(コードF)

//Void
//(11)
function warnUser(): void {
    alert("This is my warning message");
}

参考

• JavaScriptのクラス定義を簡単にする