AltJsの一つです。静的型付け言語で、フロントエンドを記述することができます。

使い方

TypeScriptのコンパイラtscは以下のコマンドでインストールできます。(npmが必要)

$ npm install -g typescript

TypeScriptのチュートリアルでよくあるGreeterプログラムを試しにかいてみます。

//main.ts
class Greeter {
      private name : string;
      constructor(name : string) {
        this.name = name;
      }
      public Greet() : string {
        return "Hello, This is " + this.name + ".";
      }
}

var naca_cyan13 = new Greeter("naca_cyan13");

document.body.innerHTML = naca_cyan13.Greet();

インストールしたtscコマンドでmain.tsをコンパイル。

$ tsc main.ts

main.jsというファイルが生成されるので、適当なHtmlに読み込ませてブラウザで実行するとHello, This is naca_cyan13.と表示されます。

TypeScriptでいいところ

Microsoftが開発元であることもあり、言語仕様がC#と似ています。VisualStudioでの開発にも対応していたり、ドキュメントも結構豊富なので学習がしやすいです。 TypeScriptは複数の.tsファイルをコンパイルして一個の.jsにする感じでコンパイルすることができます。この機能によってjavascriptよりもモジュール分割（ファイル分割）が簡単です。すでに多数のTypeScript対応のゲームフレームワークが登場しているので、ゲーム開発にも向いているでしょう。

tsconfig.json

tsconfig.jsonとはtscを使用するときにコンパイルオプションを渡せる設定ファイルです。

試しに以下のようなjsonをtsconfig.jsonとして配置してみましょう。

{
    "compilerOptions": {
    	"module": "system",
    	"noImplicitAny": true,
    	"removeComments": true,
    	"preserveConstEnums": true,
    	"sourceMap": true,
    	"outFile": "main.js"
    },
    "include": [
	    "./"
    ]
}

このtsconfig.jsonが配置されているディレクトリでtscを起爆すると

./に存在するすべての.tsファイルがmain.jsにまとめてコンパイルされる。
その際<any>型を認めない。
main.jsにはコメントを含まない。
列挙体の順序を保存する。
デバッグ機能sourceMapを有効にする。

というようなコンパイルが実行されます。

強力なデバッグ機能sourceMap

.tsをコンパイルすると.jsが出てきます。そのコードがブラウザ上でエラーを出した時、.jsファイルのどこでエラーを起こしているのかは開発者コンソールを覗けば直ぐわかります。しかし、.tsファイルでわからないと意味がないです。そこで登場するのがsourceMapです。

sourceMapは.jsと.tsを結びつける関係を定義してあるもので、.jsでエラーが発生したらそのエラーと対応する.tsの行をブラウザが提示してくれるようになります。またこのsourceMapはtypescriptに限った機能ではなく他のAltJsなどのコンパイラの機能にもあったりします。

今後やりたいこと

phaserというゲームフレームワークでTypeScriptを使ってゲームをつくってみたいと考えています。