Download as PDF, PPTX
![クラスっぽいものの定義が面倒だとか
// コンストラクタ定義
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;
})();](https://image.slidesharecdn.com/typescript-lp-startup-121126085409-phpapp01/75/TypeScript-7-2048.jpg)
![名前空間ぽいものの定義が面倒とか
// 例えば 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 );](https://image.slidesharecdn.com/typescript-lp-startup-121126085409-phpapp01/75/TypeScript-8-2048.jpg)
![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](https://image.slidesharecdn.com/typescript-lp-startup-121126085409-phpapp01/75/TypeScript-15-2048.jpg)
Uploaded byYu Nobuoka
TypeScript 言語処理系ことはじめ
Kyoto.js #1 で発表した TypeScript 言語処理系を触る話です。 ブログ記事も合わせてご覧ください: http://vividcode.hatenablog.com/entry/study-meeting/kyotojs-1-typescript-lp-startup
TypeScript 言語処理系ことはじめ
- 1. TypeScript 言語処理系ことはじめ id:nobuoka (@nobuoka) 2012-11-15 Kyoto.js #1
- 2.
- 3. 最近は JavaScript で Windowsストアアプリを開発したり JavaScript でブラウザ拡張を 書いたりしてます
- 4.
- 5. JavaScript 最高!! 最高!!
- 6.
- 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.
- 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 良さそう “TypeScriptsyntax 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. まずは普通に使ってみる ● 試すだけなら公式サイトの playground ● 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 を使ったコンパイル // 出力用オブジェクトの定義 varoutfile = { 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 を使ったコンパイル // ソースコード追加 varsrc1 = “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.
- 28. TypeScript 使ってみて ●JavaScript らしくてよい ● 敷居が低い ●JS → TS の書き換えがやりやすい ●JS のライブラリを素直に使える 既に JS で動いているアプリケーショ ● ンを少しづつ書き換えていける
- 29.