TypeScript 言語処理系ことはじめ

TypeScript 言語処理系ことはじめ

id:nobuoka(@nobuoka)

2012-11-15 Kyoto.js #1

こんにちはid:nobuoka です

最近は JavaScript でWindows ストアアプリを開発したり

JavaScript でブラウザ拡張を書いたりしてます

みなさん、JavaScript 好きですか?

JavaScript JavaScript 最高最高!!!!

そんな感じで皆大好き JavaScript なわけですが

クラスっぽいものの定義が面倒だとか// コンストラクタ定義function BaseClass(name) { this._name = name;}// インスタンスメソッドBaseClass.prototype.getName = function () { return this._name;}// 継承もややこしいfunction SubClass(name) { BaseClass.call(this, name); // 基底クラスのコンストラクタを呼ぶ}SubClass.prototype = (function () { var o = Object.create(BaseClass.prototype); var s = SubClass.prototype; Object.getOwnPropertyNames(s). forEach(function (name) { o[name] = s[name] }); return o;})();

名前空間ぽいものの定義が面倒とか

Array.prototype.map などに渡す関数をもっと手軽に書きたいとか

// 例えば hatena.bookmark という名前空間を作る場合if (!this.hatena) this.hatena = {};if (!this.hatena.bookmark) this.hatena.bookmark = {};

// 下のような感じに書きたいよねvar squares = [ 1, 2, 3 ].map( (x) => x * x );

そもそもクラスっぽいものの定義とか名前空間ぽいものの定義とかに

色々な流儀があるのもよくない、とか

大規模になってくるとやっぱり型付けできると嬉しい、とか

最高な JavaScript に対して不満はある

クラス定義とか名前空間定義とかECMAScript 6 で導入されそうだよ?

ECMAScript 6 を待てない!!JavaScript に代わる言語を使おう!!

● Haxe● 構文は ECMAScript 4 ぽい● JavaScript 以外の言語にもコンパイルできる● 長い歴史 (5 年以上)

● Dart● 1 ヶ月前に SDK の最初の安定板が出てた

● JSX● ECMAScript 4 の影響を受けてる?● 高速に実行される JavaScript を吐き出す

● CoffeeScript● 簡潔な記述?

● TypeScript● 構文は ECMAScript 6 ぽい

JavaScript の代替となる色々な言語

JavaScript を愛する我々としてはJavaScript を置き換えるものではなく

better JavaScript が欲しい

TypeScript 良さそう

“TypeScript syntax is a superset of Ecmascript 5 (ES5) syntax.” (TypeScript Language Specification Version 0.8)

とはいえ構文がスーパーセットだからといって ECMAScript 5 として実行できる JS をすべてコンパイルできるわけではない

var test = { };test.prop = 100; // コンパイルエラー

var test = { };test[“prop”] = 100; // これは OK

というわけで TypeScript 言語処理系と触れ合ったりしたので

その話をします

まずは普通に使ってみる● 試すだけなら公式サイトの play ground

● http://www.typescriptlang.org/Playground/● ローカルでコンパイルするなら node

● インストール : npm install -g typescript● コンパイル : tsc example.ts

● IDE なら Visual Studio が対応

コンパイルが遅い!!

tsc コマンドからだけでなくもっと便利に使いたい!!

typescript.js や typescriptService.js を直接使う

● TypeScript の言語処理系のソースコードは TypeScript で書かれている

● 実行できるプログラムとしては JS● typescript.js がコンパイラなど● typescriptServices.js はコード補完機能などのサービス類

● ソースコードとコンパイル後の JS はhttp://typescript.codeplex.com

typescript.js を使ったコンパイル

// 出力用オブジェクトの定義var outfile = {

source: “”,Write: function (s) {

this.source += s;},WriteLine: function (s) {

this.source += s + “\n”;},Close: function () {}

}

// コンパイラ生成var compiler = new TypeScript.TypeScriptCompiler(outfile);compiler.parser.errorRecovery = true;compiler.setErrorCallback(function (start, len, message, block) {

console.log(“error : ” + message);});

typescript.js を使ったコンパイル

// ソースコード追加var src1 = “class Test { aaa: string; };\n var ttt = 100;”;compiler.addUnit(src1, 'test1.ts');var src2 = “///<reference path='test1.ts' />\n” +

“var test = new Test(); test.”;compiler.addUnit(src2, 'test2.ts');

// 型チェックcompiler.typeCheck();

// 実行compiler.emit(false, function createFile(fileName) {

console.log(“create file : ” + fileName);return outfile;

});

console.log('compiled: ' + outfile.source);console.dir(compiler);

ブラウザ上でコンパイルできる

Node でプロセス動かしておけばコンパイルするたびに typescript.js の

読み込みを待つ必要もない

コード補完とかもしたい!

typescriptServices.js を使えばできるよ!

Services.LanguageService

使い方は TypeScript 処理系のテストを見るのがわかりやすい

Windows の JS 処理系やNode 以外の JS 処理系でも

動かしたい

src/compiler/io.ts をいじればできるよ

JavaScript 処理系ごとの IO 周りの違いを IO クラスで吸収してる

TypeScript しましょう!!

TypeScript 使ってみて

●JavaScript らしくてよい●敷居が低い●JS → TS の書き換えがやりやすい●JS のライブラリを素直に使える

●既に JS で動いているアプリケーションを少しづつ書き換えていける

JavaScript 最高!!