TypeScriptとはなにか

TypeScriptは、Microsoftによって開発され、昨年（2012年）に初めて発表されたプログラミング言語です。CodeGridでも以前紹介をしたCoffeeScript*と同様に、そのソースコードはJavaScriptに変換して利用することができます。

現在、こういったJavaScriptに変換するためのプログラミング言語は、altJSという括りでまとめられていて、ちょっとGoogleなどで情報を探そうと思えば、いくらでも見つけることができる勢いで増えています。一番有名なものは依然としてCoffeeScriptだと思われますが、昨年の発表で大きく注目をされ、その後も順調に開発が続けられているTypeScriptを今回は紹介していきたいと思います。

登場の背景

TypeScriptに限ったことではありませんが、多くのaltJSが作られている背景には、それらがJavaScriptの抱える問題に対して、それぞれのアプローチで解決しようとしている流れがあると思います。

JavaScriptの抱える問題というと、JavaScriptがダメというような言い方になってしまいますが、丁寧に言い直すのであれば、現在作られるWebページがより高度になっていく中で、JavaScriptの機能も今のままではもの足りない状況になってきているということになります。JavaScriptの方も、こんな使われ方をするとは思ってもみなかったでしょう。

もちろんJavaScript自体の進化が考えられていないわけではありません。JavaScriptの標準仕様であるECMAScriptの第5版*は2009年にリリースされ、第6版も仕様策定中です。ただ、実際にはブラウザベンダ間の足並みもあり、フロントエンドの現場では第3版仕様に従う場面も多いのではないかと思います。

TypeScriptはそういったJavaScriptの現状に対して、新たな機能を加えてのサポートや、ECMAScript6の仕様も見据えて作られた言語となっています。

TypeScriptの特徴

TypeScriptの大きな特徴としては静的型付け（後述）が採用されていることが挙げられます。

また、ECMAScript6の仕様を先取りして取り込んでいるため、今後の仕様に注目している方にも興味深い言語だと思います。これは筆者も好印象を持っている点です。

さらに、TypeScriptはJavaScriptのスーパーセットとして作られており、JavaScriptの仕様を満たしながら、その機能を拡張するような位置付けになっています。そのため、最初は多少の修正をする必要があるかもしれませんが、元のJavaScriptコードを流用して徐々に移行したり、学習を進めることができます。

まとめると、以下のようになります。

CoffeeScriptとどっちがいいの？　と思われるかもしれませんが、両者はそもそも種類の違うものです。CoffeeScriptはJavaScriptの冗長さを取り払って簡潔な書き方ができます。一方、TypeScriptは書き方の変化にとどまらず、新しい機能や、静的型付けなど、元のJavaScriptとは違う概念も持ち込まれており、どちらかというと大規模開発向きの特質があります。そのために考え方も変わってくるところがあります。

すでにこういった話をご存知の方もいるかと思いますが、静的型付けについてはここで触れておきたいと思います。

静的型付け

まず始めに、型について説明します。型というのは、その変数がどういう種類なのかを表すもので、数値型や文字列型とか呼んでいるもののことです。

プログラム言語を分類する際に、それが静的型付けなのか動的型付けなのかという分け方があります。この2つは変数の型がコンパイル*時に決まるのか、実行時に決まるのかという違いがあります。コンパイル時に決まる場合は静的型付け、実行時に決まる場合は動的型付けになります。

では静的型付けと動的型付けは、どのような違いをもたらすでしょうか。

静的型付けの言語では、この変数は文字列型です、と宣言したらもうその変数には文字列の値しか入れられません。もし違う型の値を入れようとすればコンパイルエラーが出てしまいます。一方、動的な型付けの言語では、変数にどんな型の値でも入れることができます。

JavaScriptは後者の動的型付けに分類される言語です。ですからJavaScriptは、変数にはどんな型の値でも入れることができます。

var hoge = 'hoge';
hoge = 123;

TypeScriptは前述したように静的型付けですから、JavaScriptと同じことはできずにコンパイルエラーとなってしまいます。

var hoge: string = 'hoge';
hoge = 123;

=> error TS2011: Cannot convert 'number' to 'string'.

なんだか面倒くさいと思われるかもしれませんが、実際、面倒なところはあると思います。JavaScript本来の、さっと書いてすぐ実行というような手軽さは薄まってしまいます。コンパイルエラーが出たらすべて解決しなければいけません。型を一度決めたら、そこではもう他の型を受け付けないので、実行時の段階で型を調べて、それから動作を変えるような柔軟性もありません。

静的型付けと動的型付けのどちらがよいか？　という話題を掘り下げるとおそらくきりがないのですが、静的型付けのメリットとして、コンパイルエラーが発生することによって、想定外の型の値を渡してしまっている部分を見つけることができます。このコンパイルエラーによって、コードに加えた変更の影響が事前にわかるためコードが厳密に保たれるようになっています。

また、hoge: stringといったように、これは文字列型ですよという型注釈が明示されるので、読む方も型を認識しながら読むことができます。

そのほか、型が決まっていると開発環境の側もコードの解析を行いやすくなるので、Visual StudioやWebStormのようなIDE（統合開発環境）を使った際のサポートは強力なものになります。例えば、クラス名やメソッド名の変更をしたら、その影響範囲を調べてリストアップするか、自動で変更してもらったりすることができます。

こういった特徴から、静的型付けは大規模開発に向いていると評されることが多いです。

クラスを定義してみる

TypeScriptのソースコードがどんなものか、一例としてPersonクラスを定義してみます。

class Person {

    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

書き出されるJavaScriptは以下のようになります。

var Person = (function () {
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    return Person;
})();

文法などは追って詳しく見ていきますが、ぱっと見たところ、ECMAScript6のようなクラス定義のしかたに、型の指定が加わったような形になっています。

JavaScriptのコード側には型の指定をしたような痕跡も、目に見える形で現れるといったことはありません。型の指定を読むのはあくまでもTypeScriptのコンパイラなのです。当たり前ですが、最終的に書き出すのがJavaScriptである以上、JavaScriptの仕様を超えたコードは出てきません。

ブラウザ上でTypeScriptを試す

TypeScriptの公式サイトにブラウザ上でTypeScriptを書いて、出力されるJavaScriptのコードを確認できるページが用意されています。とりあえずTypeScriptを試してみるにはここが一番手っ取り早いです。

ここではいくつかのサンプルコードも呼び出すことができるようになっています。

TypeScriptをコンパイルしてみる

TypeScriptのコンパイラはNode.js*のパッケージマネージャ、npmを経由してインストールできます。

npm install -g typescript

これでtscコマンドが使えるようになります。試しに前述したTypeScriptのコードをローカル環境でコンパイルしてみましょう。TypeScriptの拡張子は *.ts です。person.ts という名前でコードを保存したら、このファイルがあるディレクトリへ移動して以下のコマンドを実行します。

tsc person.ts

これで、同じディレクトリに person.js が書き出されます。

それでは次回から、TypeScriptの言語仕様について見ていきたいと思います。