ついにバージョン1.0が正式リリースされたTypeScriptとは何なのか？

本日、TypeScriptのv.1.0がリリースされたというアナウンスがありました。
Announcing TypeScript 1.0

TypeScriptとは何なのか？

TypeScriptは、Microsoftが2012年に発表した新しいプログラミング言語です。
スクリーンショット 2014-04-03 18.59.51
Welcome to TypeScript
僕は半年ほど前にTypeScriptを使い始め、現在運営中のサービスでも実際に導入しています。実際に使ってみて、その威力を感じているので、今回の正式リリースの発表はとても嬉しく思っています。

TypeScriptは拡張JavaScript言語

TypeScriptは、altJSと呼ばれる言語のひとつです。altJSというのは、JavaScriptを拡張した言語のことで、有名なのはCoffeeScriptやDartなどです。
JavaScriptは、いくらか使いにくいと感じる面がある一方で、WEBブラウザで動作する唯一の言語なので使わざるをえないという問題があります。
そこで、JavaScriptを拡張した言語でアプリケーションを実装し、公開前にそれをJavaScriptに変換してしまうわけです。

コンパイラはnpmからインストール

TypeScriptは、Nodeのパッケージ管理システムからインストールすることができます。

npm install -g typescript

コンパイルは、tscコマンドでおこないます。tscコマンドでコンパイルしたいTypeScriptのソースコードを指定すれば、コンパイルされたJavaScriptのソースコードが出力されます。

tsc main.ts

これで、JavaScriptのファイルが出力されるので、それをブラウザで実行するだけです。

TypeScriptは、静的な型付けをもった言語

TypeScriptの最大の特徴は、静的な型付けをもっていることです。

var num:number = 123;
var str:string = 'hello';

ほぼJavaScriptと同じ構文ですが、変数に型の制限を加えることができます。
先日オープンソース化されたFacebookの独自言語Hackも、PHPに静的な型付けを加えたものでした。
ついにオープンソース化されたFacebookの独自言語Hack
静的な型付けの特徴は、コードを書いている時点で、型の誤りによる問題を警告できることです。
たとえば、先ほどのnumber型で宣言されている変数に、文字列を代入しようとします。

var num:number = 'error';

すると、コンパイルエラーが発生します。

/Users/kataoka/test.ts(1,5): error TS2011: Cannot convert 'string' to 'number'.

JavaScriptでは、オブジェクトがもっていないメソッドを呼び出すコードを書いても、実行するまで気付くことができません。TypeScriptでは、型に定義されていないメソッドを呼び出すようなコードを書けば、コンパイラが警告を出してくれます。

TypeScriptは、クラスベースの言語

TypeScriptのもうひとつの大きな特徴は、クラスベースの言語であるということです。
JavaScriptは、プロトタイプベースなので、JavaやPHPやC++を良く使っている人間からすると、とっつきにくい面があります。また、オブジェクト指向のデザインパターンは、Javaなどをベースに思考されていることが多いので、プロトタイプベースに変換して実装するのはテクニックが必要です。
そういうわけでTypeScriptは、クラスベースに慣れた人からすると、読みやすいです。

class View {
        constructor(){
        }
        public render(){
                // TODO ビューの描画
        }
}
class AppView extends View {
        constructor(){
                super();
        }
        public render(){
                super.render();
                // TODO ビューの描画
        }
}
var appView:AppView = new AppView();
appView.render();

TypeScriptとJavaScriptの変換の対応

TypeScriptは、基本的にコードを、1対1の対応でJavaScriptに変換します。
先ほどのAppViewクラスのコードだと次のように変換されました。

var View = (function () {
    function View() {
    }
    View.prototype.render = function () {
        // TODO ビューの描画
    };
    return View;
})();
var AppView = (function (_super) {
    __extends(AppView, _super);
    function AppView() {
        _super.call(this);
    }
    AppView.prototype.render = function () {
        _super.prototype.render.call(this);
        // TODO ビューの描画
    };
    return AppView;
})(View);
var appView = new AppView();
appView.render();

非常にシンプルな構造です。
TypeScriptと良く似た性質のaltJSに、JSXがありますが、JSXは実行速度を挙げるために変換時に最適化をします。パフォーマンスを重視すると最適化は大きいですが、読みにくいコードが出力されます。
TypeScriptは、そのような最適化をしない代わりに、変換後のソースコードが読みやすく、ブラウザで実行時エラーが発生した場合も原因のコードとの対応がとりやすいです。

他にも色々な利点があります。

altJS全般に言えることですが、JavaScriptでコードを書く時に不満に感じるようなことを解決する機能が色々と盛り込まれています。それなりの規模のJavaScriptを書くのであれば、かなり大きな恩恵を受けられることは間違いないです。
特にTypeScriptは、JavaやPHPをやっていたプログラマからするととてもとっつきやすいので、これから広まっていくと良いなと思っています。

タイトルとURLをコピーしました