TypeScript 言語処理系ことはじめ
Upcoming SlideShare
Loading in...5
×
 

TypeScript 言語処理系ことはじめ

on

  • 3,615 views

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

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

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

Statistics

Views

Total Views
3,615
Views on SlideShare
2,488
Embed Views
1,127

Actions

Likes
4
Downloads
10
Comments
0

4 Embeds 1,127

http://vividcode.hatenablog.com 1121
http://webcache.googleusercontent.com 4
https://twitter.com 1
https://web.tweetdeck.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    TypeScript 言語処理系ことはじめ TypeScript 言語処理系ことはじめ Presentation Transcript

    • TypeScript 言語処理系ことはじめ id:nobuoka (@nobuoka) 2012-11-15 Kyoto.js #1
    • こんにちはid:nobuoka です
    • 最近は JavaScript でWindows ストアアプリを開発したり 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;})();
    • 名前空間ぽいものの定義が面倒とか// 例えば 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 );
    • そもそもクラスっぽいものの定義とか 名前空間ぽいものの定義とかに色々な流儀があるのもよくない、とか 大規模になってくるとやっぱり 型付けできると嬉しい、とか
    • 最高な JavaScript に対して 不満はある
    • クラス定義とか名前空間定義とかECMAScript 6 で導入されそうだよ?
    • ECMAScript 6 を待てない!!JavaScript に代わる言語を使おう!!
    • JavaScript の代替となる色々な言語● Haxe ● 構文は ECMAScript 4 ぽい ● JavaScript 以外の言語にもコンパイルできる ● 長い歴史 (5 年以上)● Dart ● 1 ヶ月前に SDK の最初の安定板が出てた● JSX ● ECMAScript 4 の影響を受けてる? ● 高速に実行される JavaScript を吐き出す● CoffeeScript ● 簡潔な記述?● TypeScript ● 構文は ECMAScript 6 ぽい
    • 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 最高!!