JavaScript系の新言語 TypeScriptを試す

2012.10.04

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

各所でニュースになってますが、10月1日にMicrosoftはTypeScriptのプレビュー版を公開しました。 TypeScriptは、JavaScriptに静的型付けやクラス機構、モジュール化といった機能を持たせたスーパーセットとなっており、 作成したコードはJavaScriptにコンパイルされます。 そして、TypeScriptの主要な機能は下記のようになっているとのことです。

  • 静的型付け(オプション)
  • クラス宣言
  • モジュール・サポート
  • Visual Studioプラグイン

詳しくは下記記事等を参考に。 Microsoft、JavaScript系の新言語、TypeScriptのデベロッパー・プレビュー版を発表

今回はこのTypeScriptをインストールして動かしてみましょう。

環境構築

今回使用した動作環境は以下のとおりです。

  • OS : MacOS X 10.7.4
  • Node.js : v0.8.2
  • npm : 1.1.21

TypeScriptはnpmを用いてインストールできます。 適当なディレクトリを作成し、そこでnpmを使用してインストールしましょう。

インストール

-g(グローバルオプション)を使用してTypeScriptをインストールします。

% npm install -g typescript

つかってみる

とりあえず公式サイトにもあるサンプルを参考に、TypeScriptファイルを作ってコンパイルしてみましょう。 TypeScriptは拡張子tsのファイルです。

//greet.ts
class Greeter {
   constructor(public greeting: string) {
    console.log("constructor");
   }
   greet() {
       return this.greeting;
   }
};

var greeter = new Greeter("Hello, world!");
var str = greeter.greet();
console.log(str);

Greeterクラスにgreetメソッドとコンストラクタを定義、インスタンス化してログ出力してますね。

ではこのgreet.tsファイルをコンパイルしましょう。 tscコマンドでtsファイルからjsファイルへコンパイルします。

% tsc greet.ts

生成されたgreet.jsファイルは下記のようになっています。

var Greeter = (function () {
    function Greeter(greeting) {
        this.greeting = greeting;
        console.log("constructor");
    }
    Greeter.prototype.greet = function () {
        return this.greeting;
    };
    return Greeter;
})();
; ;
var greeter = new Greeter("Hello, world!");
var str = greeter.greet();
console.log(str);

生成されたjsファイルはnodeでそのまま実行可能です。

% node greet.js
constructor
Hello, world!

まとめ

今回はTypeScriptをとりあえず動かしてみました。 Coffee Scriptみたいな感じで使えますね。 興味あるかたはこちらの公式サイトをごらんください。