TypeScript 言語処理系ことはじめ

3,634 views
3,494 views

Published on

Kyoto.js #1 で発表した TypeScript 言語処理系を触る話です。

ブログ記事も合わせてご覧ください:
http://vividcode.hatenablog.com/entry/study-meeting/kyotojs-1-typescript-lp-startup

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,634
On SlideShare
0
From Embeds
0
Number of Embeds
1,208
Actions
Shares
0
Downloads
15
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

TypeScript 言語処理系ことはじめ

  1. 1. TypeScript 言語処理系ことはじめ id:nobuoka (@nobuoka) 2012-11-15 Kyoto.js #1
  2. 2. こんにちはid:nobuoka です
  3. 3. 最近は JavaScript でWindows ストアアプリを開発したり JavaScript でブラウザ拡張を 書いたりしてます
  4. 4. みなさん、JavaScript 好きですか?
  5. 5. JavaScript 最高!! 最高!!
  6. 6. そんな感じで皆大好き JavaScript なわけですが
  7. 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. 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. 9. そもそもクラスっぽいものの定義とか 名前空間ぽいものの定義とかに色々な流儀があるのもよくない、とか 大規模になってくるとやっぱり 型付けできると嬉しい、とか
  10. 10. 最高な JavaScript に対して 不満はある
  11. 11. クラス定義とか名前空間定義とかECMAScript 6 で導入されそうだよ?
  12. 12. ECMAScript 6 を待てない!!JavaScript に代わる言語を使おう!!
  13. 13. JavaScript の代替となる色々な言語● Haxe ● 構文は ECMAScript 4 ぽい ● JavaScript 以外の言語にもコンパイルできる ● 長い歴史 (5 年以上)● Dart ● 1 ヶ月前に SDK の最初の安定板が出てた● JSX ● ECMAScript 4 の影響を受けてる? ● 高速に実行される JavaScript を吐き出す● CoffeeScript ● 簡潔な記述?● TypeScript ● 構文は ECMAScript 6 ぽい
  14. 14. JavaScript を愛する我々としてはJavaScript を置き換えるものではなく better JavaScript が欲しい
  15. 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. 16. というわけで TypeScript 言語処理系と 触れ合ったりしたので その話をします
  17. 17. まずは普通に使ってみる● 試すだけなら公式サイトの play ground ● http://www.typescriptlang.org/Playground/● ローカルでコンパイルするなら node ● インストール : npm install -g typescript ● コンパイル : tsc example.ts● IDE なら Visual Studio が対応
  18. 18. コンパイルが遅い!!tsc コマンドからだけでなく もっと便利に使いたい!!
  19. 19. typescript.js や typescriptService.js を 直接使う ● TypeScript の言語処理系のソースコードは TypeScript で書かれている ● 実行できるプログラムとしては JS ● typescript.js がコンパイラなど ● typescriptServices.js はコード補完機能などの サービス類 ● ソースコードとコンパイル後の JS は http://typescript.codeplex.com
  20. 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. 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. 22. ブラウザ上でコンパイルできる Node でプロセス動かしておけばコンパイルするたびに typescript.js の 読み込みを待つ必要もない
  23. 23. コード補完とかもしたい!
  24. 24. typescriptServices.js を使えば できるよ! Services.LanguageService 使い方は TypeScript 処理系の テストを見るのがわかりやすい
  25. 25. Windows の JS 処理系やNode 以外の JS 処理系でも 動かしたい
  26. 26. src/compiler/io.ts をいじればできるよJavaScript 処理系ごとの IO 周りの違 いを IO クラスで吸収してる
  27. 27. TypeScript しましょう!!
  28. 28. TypeScript 使ってみて●JavaScript らしくてよい● 敷居が低い●JS → TS の書き換えがやりやすい●JS のライブラリを素直に使える既に JS で動いているアプリケーショ●ンを少しづつ書き換えていける
  29. 29. JavaScript 最高!!

×