TypeScript 言語処理系ことはじめ

  • 2,950 views
Uploaded on

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

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,950
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
12
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 最高!!