JavaScriptを書くならTypeScriptを使え!

2012/10/03 2:08 に Jun Shin が投稿   [ 2012/11/03 19:55 に更新しました ]
先日、Hokuriku.NET vol.10に参加し、マイクロソフト井上さんのセッションを聞いて、Microsoft技術でのJavaScriptの存在感の高まりを感じていた矢先に、Microsoftから凄い言語が飛び出してきました。その名も「TypeScript」。標準的なJavaScriptにコンパイルできる、「型付けされたJavaScript」です。

これが非常にすばらしくて、Microsoft系の技術者以外でも、普段よくJavaScriptを書く人は、ぜひ注目して、使ってみて欲しいな、と思ったのでご紹介します。(いずれEclipseプラグインも出る気がします。node.jsプラグインとして提供されているので、Macでも動くみたいですよ。Vim、Sublime Text、Emacs用のプラグインはもう提供されているようです)。

ニュース - MicrosoftがJavaScript系の新言語「TypeScript」を発表、C#の父が開発:ITpro 

Microsoft、JavaScript系の新言語、TypeScriptのデベロッパー・プレビュー版を発表 http://jp.techcrunch.com/archives/20121001microsoft-previews-new-javascript-like-programming-language-typescript/

Anders Hejlsberg: Introducing TypeScript | Channel 9
↑設計者のヘルスバーグ自身による紹介ビデオ。英語だけどデモが凄く分かりやすい。この記事はこの動画を元にしています。

例えばどんな風に凄いかというと、こんな感じで書いたTypeScriptソースが…。

class Person{ 
    name : string = "no name";
    age : number = 0;
    disp(){
        alert( this.name + ", " + this.age.toString())
    }
}

次のようなJavaScriptに瞬時に変換されるんですよ!TypeScriptが入力された瞬間に、リアルタイムで!
私は紹介ビデオ見てて感動のあまり一人スタンディングオベーションしました(ウェーブ付きで)。

var Person = (function () {
    function Person() {
        this.name = "no name";
        this.age = 0;
    }
    Person.prototype.disp = function () {
        alert(this.name + ", " + this.age.toString());
    };
    return Person;
})();

ここで、出力されるJavaScriptコードが非常に美しく、モダンな表現になっていることに注目してください(ええ、これでモダン&ビューティホーなんです)。基本的に余計なコードはついていませんし、元のソースコードに近い形になっています。別にMicrosoft系の技術者でなくとも、美しく標準的なJavaScriptを得る為に、TypeScriptを使ってもいいんじゃないかとすら思います。

他にも、クラスのメンバ変数はこんな風にコンストラクタにまとめて書くこともできて、しかも省略値を指定しておくと…。

class Person{ 
    constructor ( public name : string = "no name", public age : number = 0 ){};
}

ちゃんと引数省略時の処理に展開してくれる!!

var Person = (function () {
    function Person(name, age) {
        if (typeof name === "undefined") { name = "no name"; }
        if (typeof age === "undefined") { age = 0; }
        this.name = name;
        this.age = age;
    }
    return Person;
})();

こんなのは序の口ですよ奥さん! ここから先読み進める前に、トイレ行っといた方がいいです。

TypeScriptはこちらのPlaygroundで今すぐブラウザ上で試せますので、せっかちな方は試しながら以降、読んでみてください(Chromeだと、IMEを切らないと入力できませんでしたので注意)。

もともと自分はWeb関係の仕事でJavaScriptを長く使っており、Google Mapsで「モダンな」JavaScriptが大注目された頃にその特徴的な言語仕様に触れて驚いた経験を持っています。関数オブジェクト、クロージャ、prototypeベースのオブジェクト指向、等々。しかし、面白くてパワフルではあるものの、namespaceやclassのようなものを実現しようとすると、途端にややこしい記述が必要になったり、妙な動きをし始めることがあり、よほど言語仕様に慣れていないとこれは使いこなせないぞ…とも思っていました。

で、先日のHokuriku.NETで「JavaScript重要ですよ!」と井上さんが言いながら、(おそらくあまりJavaScriptに触れたことの無い人が多い聴衆に向かって)即時関数を使った名前空間汚染回避のコードを出してjQueryのプラグインの作り方を紹介していたのですよ。いや、内容はとても全うかつ凄く面白かったんですが、これ、JavaScript知らない人にはむしろ「なんだこのわけわからんコードは…」と警戒感を与える結果になったんじゃないかと思いまして。

実際の所、JavaScriptはそこまで難しい言語ではないんですが、細かい部分で特徴的な仕様も多いので、こういうのにいきなり触れることになるMS系のJavaScript入門者達は、おそらく修羅の道が待っているのだろうな、と…。しかも、jQueryも同時に学ぶわけですよ。これどうにかならんのか?と。他人事ながら思っていたんですね。

そこへ、この「TypeScript」ですよ。これこそが、Microsoftからの答えなんじゃないかと。「JavaScriptは重要ですが開発が難しい…でも、TypeScriptを使えば、いいとこ取りができますよ!」というわけです。ちなみにこの言語を設計したのは「DelphiとC#の父」ことアンダース・ヘルスバーグ氏で、私はこの方の大ファンだったりします。言語設計の天才ですよ。

というわけで、私がヘルスバーグ氏の紹介ビデオみて感動した、TypeScriptのいいところをいくつかご紹介します。

まず、なんといっても、「全てのJavaScriptコードはすでにTypeScriptです」という点。上位互換なんですね。なので、TypeScriptを使いながら、世に数あるさまざまなJavaScriptライブラリを使うことが可能になっています。いいとこ取りが約束されているんです。

そして、名前空間(module)がある!! みんな大好き名前空間! これが無いと安心して夜眠れないですよね。
JavaScriptには名前空間を作る文法がないので、いちいち以下のようなことをして名前空間を作る必要があります。以下の例では、Sayingsという名前空間の下に、Greeterというクラスを作っています。

var Sayings;
(function (Sayings) {
    var Greeter = (function () {
        function Greeter(message) {
            this.greeting = message;
        }
        Greeter.prototype.greet = function () {
            return "Hello, " + this.greeting;
        };
        return Greeter;
    })();
    Sayings.Greeter = Greeter;    
})(Sayings || (Sayings = {}));

var greeter = new Sayings.Greeter("world");

JavaScriptに慣れていない人は、これ見て「なんじゃこりゃ?functionの前に括弧ついとるで??」とか、「Sayings || (Sayings = {})って何のおまじない??」と思う人もいると思うんですが、これがJavaScriptで名前空間を作る一般的な方法なんです。

しかし、TypeScriptでは次のように書けます。

module Sayings {
    export class Greeter {
        greeting: string;
        constructor (message: string) {
            this.greeting = message;
        }
        greet() {
            return "Hello, " + this.greeting;
        }
    }
}
var greeter = new Sayings.Greeter("world");

「Sayingsの中にGreeterというクラスがある」という意図が、ごく自然に表現されていますね。ちなみに、こう書けば、上のJavaScriptが出力結果として自動的に得られます。

JavaScriptを生で使うってのは、最初に書いたようなコードをさくっと書けるようになることなんですよね。JavaScript愛好者には申し訳ないのですが、個人的にかなり非生産的だと思っています。しかし、TypeScriptで書いておけば、元ソースは「意図をシンプルに表現」しつつ、JavaScriptで表現されたコードを得ることができるのです。

さて、次に、この言語のもっとも特徴的な部分、静的な型付けの部分。

function add( x : number, y : number ) {
return x + y;
}

何がいいかはお分かりですよね? 引数 x と y に、「数値型である」というアノテーションがついています。なので、もしここで

add( "hello", "world" );

なんてしたら、コンパイルエラーになりますし、もしVisual StudioやPlaygroundで書いているなら、その場で赤い波線が表示されて「ここは数値ですよ」と教えてくれます。型名をつけなければ、既存のJavaScriptと同様に、特にエラーは出なくなります。

この例のような簡単な例ならば、「別にそんな間違いしないよw 型情報なんて要らないんだよw」と思われるかもしれませんが、特に複雑なクラス構造を使ったシステムを作ろうとすると、「この引数はこの型しか渡せない」とかエラーを返してくれることが、ものすごくありがたくなってきます。

さらに、「エディタによるコード補間」の恩恵が大きいのです。Playgroundでやってみるとわかるのですが、オブジェクトの後にドットを入力すると、その型に応じたメンバがずらりと表示されます。関数名を入力すれば、その場で必要な引数の型が表示されます。もうバンバン開発していけます。今のところはVisualStudio.NETかPlaygroundしかありませんが、TypeScriptはオープンソースプロジェクトですので、そのうち誰かがEclipseプラグインを提供してくれるのではないかと期待しています。

ちなみに型による制約のつけ方はかなり柔軟で、こんな風にも書けます。

class Person { constructor( public name : string, public age : number ){} }
class PersonB { constructor( public fullname : string, public age : number ){} }

function showName( p : { name : string; } )
{
alert( p.name );
}

var p1 = new Person( "Taro", 18 );
showName( p1 );

var p2 = new PersonB( "Taro Yamamoro", 18 );
showName( p2 ); // 「string型のnameプロパティがありません」というコンパイルエラー

Personクラスはname:stringとage:numberを持ち、PersonBクラスはfullname:stringとage:numberを持ちます。違いはnameかfullnameかというだけです。そして、showName関数の引数の型情報として、「string型のnameプロパティを持つオブジェクトであること」という制約をつけているのです。ここに単に p : Person と書くこともできるのですが、必要な部分のみに注目して、ダックタイピングさせることができるのです。showName( p1 )は成功し、showName( p2 )は、実行を待たずしてコンパイル時にエラーとなります。これまではこの部分は実行するまで分からなかった部分です。

「へー、でも、こういう用途にはinterface使えるといいのにね」と思ったそこの貴方! あるんですよ、interfaceも…!

interface NamedObject {
name : string;
}

こうしておけば、「NamedObject」を型名として使えるようになります。これだと、さっきと同じ「string型のnameプロパティを持つ」事が制約になります。もっと省略してこんな記述もできます。

interface HogeHoge {
string;
number;
}

つまり、「プロパティ名はどうでもいいから、とにかくstring型とnumber型のプロパティがあること」という型です。interfaceには、メソッドの制約なども付けることができますし、階層化することもできます。

もちろんこれらの型情報は開発時やコンパイル時にのみ使われ、出力されるJavaScriptコードには一切現れません。

型以外にも、private修飾子が使えるようになっています。class宣言時にメンバにprivateとつければ、そのメンバは外側からアクセスできなくなります。

class Counter {
private counter : number = 0;
show(){ 
this.counter++;
alert( this.counter.toString() ); 
}
}

var c = new Counter();
alert( c.counter.toString() ); // c.counterにアクセスできないのでコンパイルエラー!
c.show(); // "1"
c.show(); // "2"

このTypeScriptコードは、以下のJavaScriptになります。privateなんて修飾はきれいさっぱりどこかへ消えてますねw

var Counter = (function () {
    function Counter() {
        this.counter = 0;
    }
    Counter.prototype.show = function () {
        this.counter++;
        alert(this.counter.toString());
    };
    return Counter;
})();
var c = new Counter();
alert(c.counter.toString()); // エラーにならない。c.counterはpublic(JavaScriptの仕様)。
c.show();
c.show();

どういうことかというと、private修飾子は、(今のところ)あくまでも開発中のみ効果を持つ、ということです。JavaScriptになった時点でpublicになっちゃうんだけど、まぁ、開発中(つまりTypeScriptの世界)だけでもその恩恵が受けれれば十分だよね、という思想です。この辺の「実用性と恩恵のバランス」が、いかにもヘルスバーグ氏っぽいなと思うんですが、どうでしょう。

ちなみにこれは余談になりますが、privateメンバって、生のJavaScriptでも、クロージャの仕組みを使って擬似的に作ることができたんですよね。例えばこんな感じで。

function Person( name, age ){
function getName(){ return name; }
function getAge() { return age; }
}

nameとageはローカル変数(ここでは引数)ですが、getNameとgetAgeから参照されている為、Personコンストラクタ実行後もクロージャに内包され、生き続けます。こうすると、nameとageは「外からはアクセスできないけど、中からはアクセスできる」というprivateメンバ的に使えます。内部でしか使わない予定だった変数を外側から使われていたり、勝手に上書きされてたりすると、仕様変更時に物凄く困ったりするので、こうしておくと便利です。

でもこれやると、prototype使ってメソッドの実体を一箇所に集約できないんですよね。prototypeを使うなら、メソッド定義をコンストラクタの外でやらなければいけないですから。クロージャにできません。かといってprivateメンバを実現する為にクロージャを使うと、Personクラスのオブジェクトを作る度にgetNameとgetAgeが生成されてメモリが無駄だし、メソッドの差し替えやオーバーライドなんかもしにくくなります。

結局、「まぁ、privateメンバは諦めよう!開発時に気を付ければ済む話!」みたいなことになってたのですが、TypeScriptを使えば、気を付けなくともコンパイラがエラー吐いてくれて安心です。尚、ECMAScriptにも同じprivate修飾子がありますが、まだ普及していないので、今後普及するにつれて、TypeScriptの出力するJavaScriptにもprivate修飾子がつくようになるでしょう。

次に、アロー関数式の紹介。こんな風に匿名関数が書けます。まぁラムダ式ですね。
関数型プログラミングでは結構採用されている表記法です。関数の生成が簡潔になるので、コード量が減り、見やすくなる効果が期待されます。

x => x * x;

これは、以下のJavaScriptになります。

function (x) {
    return x * x;
}

引数なしの匿名関数も作れます。

()=>{ alert( "Hello!") };

これは、以下のJavaScriptになります。

function () {
    alert("Hello!");
}

複数の引数の場合はこんな感じです。

(name : string, age : number) => {
alert( name + age.toString() );
};


function (name, age) {
    alert(name + age.toString());
}

この例だけだと、なんかそれほど記述量減ってなくない?という感じがしますが、個人的には「関数宣言のfunction」と、「匿名関数のfunction」はごっちゃにして欲しくないなーと思っていたので、これは見やすくなっていいんじゃないかなーと思っています。

例えば、イベントハンドラはこれまで以下のように書いてましたが、

window.onload = function( e ){
// イベント処理
};

TypeScriptでは次のようにアロー関数式を使って書けます。

window.onload = e => {
  // イベント処理
};

え、逆に見にくい?w そう思う人は、もちろんこれまで通りの記述方法でも書くことができます。でも、この記述方法には利点もあります。こう書くことで、「この部分はTypeScriptを使っている」ということをコンパイラに知らせることができるので、ちょっと面白い効果があるのです。

例えば、次のようなコードを考えてみます。ボタンを作ってそれをクリックするとカウンタが1ずつ増加していく、というものです。

class MyClass {
counter : number = 0;
constructor(){
var button = document.createElement( "button" );
button.innerText = "count";
button.onclick = function( e )
this.counter++;
alert( this.counter.toString() );
};
document.body.appendChild( button );
}
}

var obj = new MyClass();

実行すると、画面上に「button」というキャプションがついたボタンが表示されます。クリックすると、button.onclickが呼ばれ、this.counterが1増加してその値が表示され…るはずなのですが、その代わりに「NaN」と表示されます。「な、なんだってー!?」の略ではないですよ。Not a Numberの略です。「数値じゃねーよ」って怒られてるわけですね。

その原因は、button.onclickが呼ばれるとき、onclick関数を読んでいるオブジェクトは「MyClass」のインスタンスであるobjではなくて、buttonオブジェクトだからです。JavaScriptでは、「this」はあくまでも「実行時」に対象が決定するんです。だから、this.counterは、実行時にはbutton.counterの意味になっているという。そりゃbuttonにcounterプロパティは無いわ。this.counter++で失敗して「これ数値じゃないわ」ってなるわ。JavaScriptでは陥りがちなミスなんですが、これがなんと、e => {} の形式で書いておくと、解決されます。

class MyClass {
counter : number = 0;
constructor(){
var button = document.createElement( "button" );
button.innerText = "count";
button.onclick = e =>
this.counter++;
alert( this.counter.toString() );
};
document.body.appendChild( button );
}
}

このTypeScriptから生成されるJavaScriptは、こんな感じです。

var MyClass = (function () {
    function MyClass() {
        var _this = this;
        this.counter = 0;
        var button = document.createElement("button");
        button.innerText = "count";
        button.onclick = function (e) {
            _this.counter++;
            alert(_this.counter.toString());
        };
        document.body.appendChild(button);
    }
    return MyClass;
})();

button.onclickのイベントハンドラの中身をご覧ください。
「_this.counter++;」と、thisじゃなく_thisに変わっているのがお分かりでしょうか? で、その_thisはどこで定義されているかというと、MyClassの直下、var _this = this; で定義されています。つまり、_this は this への参照なんだけど、こう書くことで、onclickイベントハンドラがどのオブジェクトから呼ばれようと、それはこのMyClassのインスタンス生成時に作られたこのローカル変数、つまりMyClassのインスタンスオブジェクトのthisを指すことになるんですね。

この辺、クロージャとか分かってないと意味不明かもしれませんが、まぁ、JavaScript使ってると、こういうテクニックも必要になるのです。ところが、TypeScriptでアロー関数式使っておけば、この辺も安心! 積極的にアロー関数式使っていきたいですね。

尚、イベントハンドラ内でthisを使わなければ、_this を含む余計な処理はパッと消え去ります。素晴らしい!

ちなみに、「なんだよ、アロー関数式使わない場合でも、イベントハンドラ内でthis使ってたらこういうことやってくれよー、けちー」と思われる方もいらっしゃるかもしれませんが、恐らくこの辺は、既存のJavaScriptライブラリとの互換性を考慮してこうなっているのだろうと思います。thisの参照先が実行時に決まるこの仕様を利用しているケースもありますからね。

では最後に、クラスの継承、extendsを紹介します。JavaScriptではクラスという概念がそもそもありませんから、継承という概念を実現するにも、だいぶややこしい事をしなければなりません。が、ここでそれを説明しだすといくら紙面があっても足りないので、とにかく、「ややこしいことを非常にスマートに書けるようになる」という事です。

具体的にはこんなコードになります。

class Person {
    constructor( public name : string, public age : number ){}
    disp(){ alert( this.name + ", " + this.age.toString() ) }
}

class CEO extends Person {
    constructor( name, age ) {
    super( name, age );
    }
    disp(){ alert( "CEO: " + this.name + ", " + this.age.toString() ) }
    
}

var c = new CEO( "Anders Hejlsberg", 51 );
c.disp(); // "CEO: Anders Hejlsberg, 51"

Personを継承して、CEOクラスを作っています。変更点は、dispメソッドで頭に「CEO: 」を付けてalertする、というだけ。

他の言語に慣れている人なら、一発で理解できますよね。では、これがどんなJavaScriptになるかというと・・・。

var __extends = this.__extends || function (d, b) {
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
}
var Person = (function () {
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.disp = function () {
        alert(this.name + ", " + this.age.toString());
    };
    return Person;
})();
var CEO = (function (_super) {
    __extends(CEO, _super);
    function CEO(name, age) {
        _super.call(this, name, age);
    }
    CEO.prototype.disp = function () {
        alert("CEO: " + this.name + ", " + this.age.toString());
    };
    return CEO;
})(Person);
var c = new CEO("Anders Hejlsberg", 51);
c.disp();

うげえええええ!!
正直、CEOクラスの中身とか、あまり長時間見続けると健康に直ちに影響を及ぼしそうです。…まぁ、それでもずいぶんキレイになっているとは思いますけど。何度もいいますが、こういうことは、通常のJavaScriptライブラリでは普通に記述されていることなのです。(余談ですが、気になる方の為に軽く__extendsの中身を見てみると、ちゃんとconstructorプロパティに自分自身(CEO)のコンストラクタ関数オブジェクトを入れてますし、継承元(Person)のprototypeプロパティをコピーした上で新しくインスタンスを作って、継承先(CEO)のprototypeプロパティに入れています。「prototype以外に突っ込んだメンバはどうなるんだ?」と思われるかもしれませんが、継承先では必ず継承元のコンストラクタを「super()」を使って呼び出さなくてはならないので、コンストラクタ内で突っ込んだメンバに関してはここで再現されます。コンストラクタ以外で動的に突っ込んだメンバについては、継承を諦めろってことですね。合理的で現実的な割り切りだと思います。)

ちなみに、1行目にある__extends = … の部分は、extendsキーワードを使うと自動的に挿入されます。使わなければ入ってきません。既にお気づきの方もいらっしゃるかもしれませんが、TypeScriptが出力するJavaScriptは、基本的に専用ライブラリを必要としません。必要なコードは自動的に挿入され、使われないものは入りません。「僕たちは君をMicrosoftの技術に取り込むつもりはないんだよ!」という、ヘルスバーグ氏、もといMicrosoftからのメッセージが聞こえませんか? 両手を広げてパンツ一丁で笑顔で走ってくるアンダースおじさんの姿が目に浮かぶようです。ああん、もう捕まってしまいたいッ!

以上、駆け足で、ヘルスバーグ氏の紹介ビデオからいくつかご紹介しました。

ところで、TypeScriptを見て、「そういやGoogleも、Dartとかいうの出してたよな…あれと一緒で、そのうちすぐ忘れられるんだろ?」みたいな事を思った人もいるかもしれません。私もその一人でした。

しかし、Dartと大きく違うのは、Dartが「JavaScriptにもコンパイルできる、JavaScriptを置き換える事を狙った言語」であるのに対して、TypeScriptはあくまでも「JavaScriptをより便利に使う為のコンパイル言語」にとどまっている点です。また、TypeScriptの仕様のほとんどが、基本的にはECMAScriptの先取りになっている点にも注目です。jQueryとnode.jsが、すでにTypeScriptベースで提供されている点もすばらしいですね。

言語仕様の追加は必要最低限、しかしかゆい所に手が届く。さすが俺たちのアンダース・ヘルスバーグ!あなたが神か!

個人的には、「JavaScriptで名前空間とかクラスを表現する標準的な方法ってどんなんだろう? ライブラリを使えばシンプルに書けるんだろうけど、そのライブラリに依存するのも嫌だし、自前で作って妙な副作用起こすのも嫌だしなぁ…」とずっと思っていたんですよね。なので、JavaScriptで本格的なコードを書く勇気が出なかった。でも、TypeScriptを使えば、全て解決します。出力されるJavaScriptコードに問題が発見されたとしても、最新版のTypeScriptで再コンパイルを行えばソースコード手直しせずに問題解決できる可能性が高いですし、TypeScriptはオープンソースなので、最悪でも自分で出力をカスタマイズすることもできます。

これからJavaScriptを始める人にこそ、このツールを使いながら「JavaScriptにするとこうなるんだー」ってのを体感しつつ、TypeScriptとJavaScriptを一緒に学んでいく、なんて使い方もできるかもしれませんね。むしろ、使っているうちに、JavaScriptの仕様のほうがTypeScriptに追いついてくる可能性も高いと思います。

プロジェクトで共通に使うライブラリだけTypeScriptで書いて強固にメンテナンスし、末端の利用シーンではJavaScriptでこれまで通り使う、なんて使い方も良いかもしれませんね。

そんなわけで、MS系の皆様は特に、そうでない方も、Eclipseプラグインの登場を心待ちにしつつ、まずはPlaygroundで遊んでみましょう。コンパイル環境だけなら、node.jsのプラグインとしてインストールも可能になっています。冒頭の、ヘルスバーグ自身による紹介ビデオも面白いですよ(って、ほとんどこの記事で紹介した内容ですが)。ビデオでは、後半(35分ぐらい)からnode.jsを使ってサーバを立ち上げ、ブラウザからアクセスして結果を表示する、というデモをやっていて、興味ある方には必見です。

【追記】「でもどうせWindowsでしか動かないんでしょ?」というツイートを見かけたのですが、node.jsのnpmモジュールとして提供されているので、node.jsさえ入っていればMacでも動く…らしいです(未確認)。お試しを! node.js環境でのインストール方法をご参照ください。そもそも、TypeScriptコンパイラ自体がTypeScriptで書かれており、つまりそれはJavaScriptとして動かせるということだと思うので、多分JavaScriptが動かせればどこでも動くんだろうな、と思います。

【追記】各種エディタ用のプラグインが提供されています。現状では、Vim、Sublime Text、Emacsです。ダウンロードページの「Tools」の所に、「other editors」というリンクがありますので、そちらから各種プラグインがダウンロードできます。

【追記】やっぱ、ある程度の規模のTypeScriptを書くなら、ファイル1個だけってわけには行きませんよね。クラス定義したファイルとそれを使うコードが書かれたファイルは別にしたかったり。というわけで、「TypeScriptで複数ファイルを扱おうとしてハマった点まとめ」を書いたのでどうぞ。結構ハマりましたw

こちらの英語記事も人気のようなのでご紹介(長いので一部抜粋して抄訳です。詳細は本文をご確認ください)。

「自分は最初懐疑的だったけど、見てみると良いものだった。特に、JavaScriptの上位互換で、ECMAScriptに準拠しようとしている点が良い。出力されるJavaScriptも、余計なものがなくポピュラーな形式になっている。ただ、これがまだ早期プレビュー版だということを忘れてはいけない。ECMAScript6の仕様策定もまだ終わっていない以上、今後いくらでも仕様変更の可能性がある。お試しで使うには良いが、仕事で使うのであれば、型宣言とinterface程度に留めておくのが無難だ。これらは出力されるJavaScriptに影響しないし、ECMAScript6と直接的な関係がないからだ。ClassやModuleなど、現在のECMAScript5でサポートされていないものは避けた方がいい。」

まったくその通りですね。あまりに感動して熱くなってしまいましたが、せめてversion1.0が出るまでは本格的な使用を待った方が良さそうです。自分は個人的なプロジェクト等で使ってみようかなと思います。というかもう使い始めてしまいましたw

【追記】ある程度の複雑さのアプリケーションを書いたらどうなるか試してみました。→TypeScript+jQueryでオブジェクト指向で画像ビュアー作った
Comments