読者です 読者をやめる 読者になる 読者になる

割と普通なブログ

Microsoft Azure や ASP.NET、Java EE 系の話題を記載します

TypeScript を触り始めてみる

ちょっと前に公開された TypeScript だが、ちょっと手を付けたので記載する。私が手を付けた程度は次のサイトに紹介されているので、ぜひ参照してほしい。
http://www.typescriptlang.org/

インストール

npm(node package manager)を利用する方法と Visual Studio 2012 にインストールする場合で、それぞれ方法が異なる。

  • npm を利用する場合

この場合、npm で -g オプションを利用することで、tsc を単独のコマンドとして利用可能となる。以下の npm コマンドを実行するだけで tsc のインストールは完了する。

> npm install -g typescript

この場合、以下のリンクからダウンロードできるインストーラに従うだけでインストールが完了する。
Install TypeScript for Visual Studio 2012

簡単なコードのコンパイル

TypeScript の拡張子は *.ts であるため、ファイル名は hello.ts として以下のソースコードを作成する。

  • hello.ts
class Hello{
  constructor(public message: string){
  }
  say(){
    return "<h1>" + this.message + "</h1>";
  }
}

var obj = new Hello("Hello, world!");
var str = obj.say();

document.body.innerHTML = str;

次に、上記のソースコード hello.ts を、以下のコマンドでコンパイルする。

> tsc hello.ts

コマンドの実行結果として、以下の hello.js ファイルが生成される。

  • hello.js
var Hello = (function () {
    function Hello(message) {
        this.message = message;
    }
    Hello.prototype.say = function () {
        return "<h1>" + this.message + "</h1>";
    };
    return Hello;
})();
var obj = new Hello("Hello, world!");
var str = obj.say();
document.body.innerHTML = str;

JavaScript の prototype を利用したオブジェクト指向を実現しつつ、名前空間を汚さない JavaScript が生成されている様だ(;゚д゚)ゴクリ…

インターフェースを利用する

次に、TypeScript の予約語である interface を利用したソースコードを検証する。hello_class.ts ファイルとして以下のソースコードを作成した。

  • hello_class.ts
interface Person{
  firstname: string;
  lastname: string;
}

function sayHello(person : Person){
  return "Hello, " + person.firstname;
}

document.body.innerHTML = sayHello(user);

var user = {
  firstname: "htusu",
  lastname: "warito"
};

上記のソースコードをtscでコンパイルした結果、以下の JavaScript ソースコードが出力される。

function sayHello(person) {
    return "Hello, " + person.firstname;
}
document.body.innerHTML = sayHello(user);
var user = {
    firstname: "htusu",
    lastname: "warito"
};

また、lastname プロパティが存在しないオブジェクトを sayHello() メソッドに渡した場合、以下の様にコンパイルエラーとなり、タイプセーフが実現されている。

C:/my_programs/TypeScript/hello_class.ts(10,26): Supplied parameters do not match any signature of c
all target:
        Type '{ firstname: string; }' is missing property 'lastname' from type 'Person'

日本語を利用した場合

TypeScript で日本語を利用する場合も文字化けせずにコンパイルできるようだ。試しに以下のコードをコンパイルする。ファイルはUTF-8で保存する。

  • japanese.ts
//日本語のコメント
var user = {
    firstname: "普通",
    lastname: "割と"
};

コンパイル結果として、以下のファイルが出力される。

  • japanese.js
// 日本語のコメント
var user = {
    firstname: "普通",
    lastname: "割と"
};