Kyoto.js #1 で発表した TypeScript 言語処理系を触る話です。 ブログ記事も合わせてご覧ください: http://vividcode.hatenablog.com/entry/study-meeting/kyotojs-1-typescript-lp-startup

1. TypeScript 言語処理系ことはじめ
id:nobuoka
(@nobuoka)
2012-11-15 Kyoto.js #1

2. こんにちは
id:nobuoka です

3. 最近は JavaScript で
Windows ストアアプリを開発したり
JavaScript でブラウザ拡張を
書いたりしてます

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

5. JavaScript 最高!!
最高!!

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

7. クラスっぽいものの定義が面倒だとか
// コンストラクタ定義
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;
})();

8. 名前空間ぽいものの定義が面倒とか
// 例えば hatena.bookmark という名前空間を作る場合
if (!this.hatena) this.hatena = {};
if (!this.hatena.bookmark) this.hatena.bookmark = {};
Array.prototype.map などに渡す関数
をもっと手軽に書きたいとか
// 下のような感じに書きたいよね
var squares = [ 1, 2, 3 ].map( (x) => x * x );

9. そもそもクラスっぽいものの定義とか
名前空間ぽいものの定義とかに
色々な流儀があるのもよくない、とか
大規模になってくるとやっぱり
型付けできると嬉しい、とか

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

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

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

13. JavaScript の代替となる色々な言語
● Haxe
● 構文は ECMAScript 4 ぽい
● JavaScript 以外の言語にもコンパイルできる
● 長い歴史 (5 年以上)
● Dart
● 1 ヶ月前に SDK の最初の安定板が出てた
● JSX
● ECMAScript 4 の影響を受けてる?
● 高速に実行される JavaScript を吐き出す
● CoffeeScript
●
簡潔な記述?
●
TypeScript
● 構文は ECMAScript 6 ぽい

14. JavaScript を愛する我々としては
JavaScript を置き換えるものではなく
better JavaScript が欲しい

15. 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

16. というわけで TypeScript 言語処理系と
触れ合ったりしたので
その話をします

17. まずは普通に使ってみる
● 試すだけなら公式サイトの play ground
●
http://www.typescriptlang.org/Playground/
●
ローカルでコンパイルするなら node
● インストール : npm install -g typescript
● コンパイル : tsc example.ts
● IDE なら Visual Studio が対応

18. コンパイルが遅い!!
tsc コマンドからだけでなく
もっと便利に使いたい!!

19. typescript.js や typescriptService.js を
直接使う
● TypeScript の言語処理系のソースコードは
TypeScript で書かれている
● 実行できるプログラムとしては JS
● typescript.js がコンパイラなど
● typescriptServices.js はコード補完機能などの
サービス類
●
ソースコードとコンパイル後の JS は
http://typescript.codeplex.com

20. 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);
});

21. 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);

22. ブラウザ上でコンパイルできる
Node でプロセス動かしておけば
コンパイルするたびに typescript.js の
読み込みを待つ必要もない

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

24. typescriptServices.js を使えば
できるよ!
Services.LanguageService
使い方は TypeScript 処理系の
テストを見るのがわかりやすい

25. Windows の JS 処理系や
Node 以外の JS 処理系でも
動かしたい

26. src/compiler/io.ts をいじればできるよ
JavaScript 処理系ごとの IO 周りの違
いを IO クラスで吸収してる

27. TypeScript しましょう!!

28. TypeScript 使ってみて
●JavaScript らしくてよい
●
敷居が低い
●JS → TS の書き換えがやりやすい
●JS のライブラリを素直に使える
既に JS で動いているアプリケーショ
●
ンを少しづつ書き換えていける

29. JavaScript 最高!!