TypeScriptの基礎から実践・利用事例までわかめ まさひろ1
わかめ まさひろGAEAndroidTypeScriptAngularJS@vvakame2
• Google App Engine• Android• Google Appsなどなど、技術に特化した会社です。3
普段の開発環境http://goo.gl/VBQic4
• Windows!! ! → VMwareに…• VisualStudio! → 持ってない• ゴメンナサイッ ○┐5
アンケート• jQueryバリバリです• JavaScriptバリバリです• Java or C#バリバリです• C言語ならまかせろー!• ハードウェアなら任せろー!6
TypeScriptって何?7
Webアプリの時代• Webアプリがどんどんリッチに• Google Maps • Google Drive • Facebook • 大規模開発の必要性• コードたくさん• 関係者多数• サーバの土管化 (JSON吐く機械)8
JavaScript sucks!• JavaScriptは確かに良い言語だよ• しかし腐ってる部分もたいへん多い• packageとかnamespaceとかない• 綺麗なコード書ける=上級者• prototypeのOOP??ナニソレ• 型( ...
TypeScriptって?• Anders Hejlsberg開発• MSのC#の作者• JavaScriptに変換して実行する• ECMAScript6を意識• 未来が来ないなら俺が行く!• 現行ブラウザは 3.1 がほとんど• JavaSc...
TypeScript the Great• JSのSuperSet(上位セット)だよ!• 全てのJSはTypeScriptである• 可読性の高い変換後JSコード• moduleある!classもある!継承もある!• 型もあるよ!• 既存の資産も...
型がある• リファクタリングした時安心• IDEが賢くなる余地が大きい• シンボルのリネーム• メソッドシグニチャの変更• 100%アクセス可能な要素のみ補完• 作り始めた時の設計 != 最終的な設計12
TypeScript以外は?• まとめて alterJS と呼ばれる• CoffeeScript • Dart • JSX • Haxe 13
CoffeeScriptは?• Better JavaScript • インデントベース• 可読性の高い変換後JSコード• Railsで標準採用• classベースのOOP• 既存の資産も活かせる• TG社でも割りと使っています• 惜しむらくは...
Dartは?• Google先生が作ってる• 将来的にJavaScriptを完全に置き換え• 全く別言語からの変換• 変換後JSは人には読めない• Dartにロックインされる• IDEが並行で開発されている!!• 言語仕様が後発なのに芋っぽかっ...
JSXは?• DeNAが作ってる• 動作速度最優先!強力な最適化!• それなりにES6っぽい見た目• 変換後JSはかなり読めない• 開発のリソースがちょっと足りなさげ16
Haxeは?• OCamlで書かれている• 言語仕様的にはかなり美しい• 変換後JSはかなり読めない• 色々な言語に変換できる• 優秀なIDEがWindowsにしかない17
まとめCoffeeScript 僕Python派閥なんで…Dart そもそもJavaScript捨てる予定だしーJSX 動作速度至上主義!Haxe 僕JS以外にも狙い定めてるし僕の言語仕様超美しいよ!なんてったってOCamlだしね!TypeSc...
残念ながら…JavaScriptわからずに開発できるほど甘くはないJavaScriptも基本教養として学習が必要TypeScriptを踏み台にするのは大アリ19
TypeScript基本文法20
TypeScript基本文法• JavaScriptのSuperSet (上位セット)• JSのコードはTypeScriptとして正しい• ※嘘です• 型指定の追加が必要• 既存型にメソッド追加はエラーになるJSがそのまま動くわけではない…21
TypeScript基本文法• 変数名の後に型指定が可能• if文やfor文などの制御構文は同じvar hoge:string = "hoge";if (hoge === "hoge") {alert("true!");}var array =...
var hoge = "hoge";hoge.arimasen();hoge = "fuga";hoge = 1;var fuga:any = "fuga";fuga = 1;変数について• 型指定の省略も可能• 右辺から自動的に推論される• ...
クラスについて• JSはプロトタイプベースのOOP• 多くのプログラマに馴染みが薄い…• TypeScriptはクラスベースなOOP!class Test {str:string;constructor() {this.str = "new";...
class Test {constructor(public str:string = "new"){}public showMessage():void {alert(this.str);}}var test = new Test();tes...
var func1 = function (str = "World") {alert("Hello " + str);}var func2 = (str = "World") => {alert("Hello " + str);}func1(...
class Sample {text = "Meow";test() {var func1 = function () {alert(this.text);};var func2 = () => {alert(this.text);};func...
複雑なJSのthis事情…• JavaScriptではthisが何を指すかは結構複雑• アロースタイルの導入で多少楽ができるvar hoge = {foo: "bar",print: function () {console.log(this....
引数について• 省略可能引数• デフォルト値付き引数• 可変長引数var func1 = (str?:string) => alert(str);func1();func1("Hello world");var func2 = (str = "...
module Sample {export class Test {static text = "Hello world";}class Internal {}}alert(Sample.Test.text);var Sample;(funct...
interface Animal { walk(); }interface Cat extends Animal { meow(); }class NorwegianForestCat implements Cat {walk() {alert...
構造的部分型• interface = 満たすべき仕様• 仕様があってりゃえじゃないかTSinterface MusicPlayer {play(title:string);}var gameMusicPlayer =(player:Music...
構造的部分型interface Settings {method:string;url:string;cache?:bool;}var doAjax = (settings:Settings) => {// あれやこれや};var settin...
public, private• メソッドやプロパティをprivateに• コンパイル時チェックのみ• publicもprivateも生成されるJavaScriptに違いclass Sample {private test1() {}publi...
class A {constructor(public str:string, public num:number){}}class B {constructor(private a:A, public bool:bool){}get str(...
cast• <any> 最強です 稀に使います• TypeScriptの利点が失われるので極力使用しちゃあダメ!TSclass A {}class B {}var b1:B = new A();var b2:B = <B> new A();va...
enum• 一応あるよー、とだけ…• わかめ的には文字列で欲しい…• ↑Java脳 .name() .valueOf(String)TSenum Sample {A, B, C, D = 10}alert(Sample.B.toString()...
interface Message {new (str:string):{showMessage();};}var func = (messageClass:Message) => {new messageClass("Hello").show...
class Sample {show(str:string):void;show(num:number):void;show(obj:any) {if (typeof obj === "string") {alert("string:" + o...
実践!TypeScript40
既存資産の活用• 型指定ファイルを作成• .d.ts という拡張子• http://goo.gl/jrvH5• 普通のtsコンパイルで.d.tsの出力も可能• Roadmapでは0.9.xで集積サイトが…• →2月くらいに記述が消えた(´・#・...
既存資産の活用interface IScope {// Documentation says exp is optional, but actual implementaton counts on it$apply(exp: string): ...
既存資産の活用• 構造的部分型が大変良い!• 整合性があっていればちゃんと使える• JavaScriptの文化に馴染みやすいinterface Settings {method:string;url:string;}var doAjax = (...
開発環境• VisualStudio • 王道• WebStorm • JetBrains社 最近AndroidStudio出した• Macユーザにオススメ• わかめはWebStormしかわかりません44
サンプルコードを試す• git clone git://github.com/vvakame/typescript-project-sample.git• 上記ディレクトリ直下で• npm install• bower install• tsd...
npm• Node.js用パッケージ管理ツール• TypeScriptも使ってます!• 新規コマンドのインストール -g• プロジェクト単位の依存性解決• package.jsonに依存関係を書く46
grunt• Node.jsベースのタスク自動化ツール• npmでgrunt用タスクがたくさん!• プロジェクト内の設定共有も用意に• grunt-typescript などが便利• Gruntfile.js に設定を書く47
bower• フロントエンドのJavaScript用パッケージ管理ツール• bower.json に依存関係の設定を書く48
tsd• TypeScriptの型情報定義ファイル .d.ts の管理ツール• .d.ts については後述• まだまだ発展途上…49
必要なもののインストール• npm install -g typescript• npm install -g grunt-cli tsd bower• phantomjs http://phantomjs.org/npm は nodebrew...
TypeScript利用事例51
TOPGATE社内利用例+onGAE/Java52
TOPGATE社内利用例• 現在1案件で利用中 (完了• 工数3人月くらい (プログラマ2名• AngularJS + TypeScript | GAE/J • サーバ側UnitTestでクライアント側UnitTest用のテストデータを生成• ...
TOPGATE社内利用例• サーバとのデータ受け渡し• サーバ側モデルと 1:1 対応する形でクライアント側でもクラスを作成• get, set アクセサが大変役に立つ• Genericsが無かったので少し危なっかしい• エンバグ率が結構高い…54
TOPGATE社内利用例• 設計変更やメソッドの変更に強い!• エラーはコンパイル時に検出できる• 複数人開発でも安心して開発できる• JavaScriptよりスキルレベル差が出にくい• ロジックの実装に集中できる• データ欠けの出元を追い回す...
TOPGATE社内利用例• JSライブラリを使う時にまず .d.ts 書く所から始めないといけない率が高い• AngularJSのHTML記述部分が静的にチェックできない…• 割りとよくバグる• デバッグがJavaScriptより大変• Sou...
TOPGATE社内利用例• 総括• TOPGATE社はTypeScriptを続けるよ!57
これからのTypeScript58
0.9の話• 現行は0.8.3です• bool 型が boolean になったり• Genericsが入ったり• その他色々• http://goo.gl/d7rYK• http://goo.gl/IFkxl59
Genericsclass ProcessedHttpPromiseImpl<T> {constructor(public promise:ng.IHttpPromise,public preProcess:(data:any)=>T) {}s...
• .d.ts 用• 引数に応じて帰ってくるものの型が変わるSpecialized Signaturesinterface Document {createElement(tagName: string): HTMLElement;create...
参考62
参考• G+ TypeScript • http://goo.gl/RINqk • わかめはてブ• http://goo.gl/pUdoD • TypeScript クイックガイド• http://phyzkit.net/typescript/63
参考• Playground • http://goo.gl/dix4F • Spec • http://goo.gl/0PjYT • DefinitelyTyped • http://vvaka.me/WYHzGT 64
ご清聴ありがとうございました。教育案件や技術コンサルもやってます。65
Upcoming SlideShare
Loading in...5
×

Buildinsider OFFLINE TypeScriptの基礎から実践・利用事例まで

7,421

Published on

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

No Downloads
Views
Total Views
7,421
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
0
Likes
38
Embeds 0
No embeds

No notes for slide

Buildinsider OFFLINE TypeScriptの基礎から実践・利用事例まで

  1. 1. TypeScriptの基礎から実践・利用事例までわかめ まさひろ1
  2. 2. わかめ まさひろGAEAndroidTypeScriptAngularJS@vvakame2
  3. 3. • Google App Engine• Android• Google Appsなどなど、技術に特化した会社です。3
  4. 4. 普段の開発環境http://goo.gl/VBQic4
  5. 5. • Windows!! ! → VMwareに…• VisualStudio! → 持ってない• ゴメンナサイッ ○┐5
  6. 6. アンケート• jQueryバリバリです• JavaScriptバリバリです• Java or C#バリバリです• C言語ならまかせろー!• ハードウェアなら任せろー!6
  7. 7. TypeScriptって何?7
  8. 8. Webアプリの時代• Webアプリがどんどんリッチに• Google Maps • Google Drive • Facebook • 大規模開発の必要性• コードたくさん• 関係者多数• サーバの土管化 (JSON吐く機械)8
  9. 9. JavaScript sucks!• JavaScriptは確かに良い言語だよ• しかし腐ってる部分もたいへん多い• packageとかnamespaceとかない• 綺麗なコード書ける=上級者• prototypeのOOP??ナニソレ• 型( ゚"゚)クレ 動的型付とかやだよ!• なのにブラウザ上で動くのはJSだけ9
  10. 10. TypeScriptって?• Anders Hejlsberg開発• MSのC#の作者• JavaScriptに変換して実行する• ECMAScript6を意識• 未来が来ないなら俺が行く!• 現行ブラウザは 3.1 がほとんど• JavaScriptはイケてない!10
  11. 11. TypeScript the Great• JSのSuperSet(上位セット)だよ!• 全てのJSはTypeScriptである• 可読性の高い変換後JSコード• moduleある!classもある!継承もある!• 型もあるよ!• 既存の資産も捨てなくて済むよ!• TypeScriptはロックインもされない!11
  12. 12. 型がある• リファクタリングした時安心• IDEが賢くなる余地が大きい• シンボルのリネーム• メソッドシグニチャの変更• 100%アクセス可能な要素のみ補完• 作り始めた時の設計 != 最終的な設計12
  13. 13. TypeScript以外は?• まとめて alterJS と呼ばれる• CoffeeScript • Dart • JSX • Haxe 13
  14. 14. CoffeeScriptは?• Better JavaScript • インデントベース• 可読性の高い変換後JSコード• Railsで標準採用• classベースのOOP• 既存の資産も活かせる• TG社でも割りと使っています• 惜しむらくは型がない!14
  15. 15. Dartは?• Google先生が作ってる• 将来的にJavaScriptを完全に置き換え• 全く別言語からの変換• 変換後JSは人には読めない• Dartにロックインされる• IDEが並行で開発されている!!• 言語仕様が後発なのに芋っぽかった15
  16. 16. JSXは?• DeNAが作ってる• 動作速度最優先!強力な最適化!• それなりにES6っぽい見た目• 変換後JSはかなり読めない• 開発のリソースがちょっと足りなさげ16
  17. 17. Haxeは?• OCamlで書かれている• 言語仕様的にはかなり美しい• 変換後JSはかなり読めない• 色々な言語に変換できる• 優秀なIDEがWindowsにしかない17
  18. 18. まとめCoffeeScript 僕Python派閥なんで…Dart そもそもJavaScript捨てる予定だしーJSX 動作速度至上主義!Haxe 僕JS以外にも狙い定めてるし僕の言語仕様超美しいよ!なんてったってOCamlだしね!TypeScript JavaScript後進の優等生ざます18
  19. 19. 残念ながら…JavaScriptわからずに開発できるほど甘くはないJavaScriptも基本教養として学習が必要TypeScriptを踏み台にするのは大アリ19
  20. 20. TypeScript基本文法20
  21. 21. TypeScript基本文法• JavaScriptのSuperSet (上位セット)• JSのコードはTypeScriptとして正しい• ※嘘です• 型指定の追加が必要• 既存型にメソッド追加はエラーになるJSがそのまま動くわけではない…21
  22. 22. TypeScript基本文法• 変数名の後に型指定が可能• if文やfor文などの制御構文は同じvar hoge:string = "hoge";if (hoge === "hoge") {alert("true!");}var array = ["hoge", "fuga"];for (var i = 0; i < array.length; i++) {alert(array[i]);}http://goo.gl/tYdgGTS22
  23. 23. var hoge = "hoge";hoge.arimasen();hoge = "fuga";hoge = 1;var fuga:any = "fuga";fuga = 1;変数について• 型指定の省略も可能• 右辺から自動的に推論される• メソッドなどの存在チェックがされるstringにarimasenメソッドはないstringにnumberは入れられないanyはなんでも!なるべく使わないTS23
  24. 24. クラスについて• JSはプロトタイプベースのOOP• 多くのプログラマに馴染みが薄い…• TypeScriptはクラスベースなOOP!class Test {str:string;constructor() {this.str = "new";}showMessage():void {alert(this.str);}}new Test().showMessage();var Test = (function () {function Test() {this.str = "new";}Test.prototype.showMessage = function () {alert(this.str);};return Test;})();new Test().showMessage();TS JShttp://goo.gl/G7t0U24
  25. 25. class Test {constructor(public str:string = "new"){}public showMessage():void {alert(this.str);}}var test = new Test();test.str = "Hello";test.showMessage();クラスについて• 省略記法が色々• コンストラクタの引数をプロパティにTShttp://goo.gl/7Hi7T25
  26. 26. var func1 = function (str = "World") {alert("Hello " + str);}var func2 = (str = "World") => {alert("Hello " + str);}func1(); // Hello Worldfunc2("にゃんこ"); // Hello にゃんこ// func1(1);関数について• 書き方色々• 通常のJSスタイル• アロー関数式TS型が合わないのでエラー http://goo.gl/ArVFH26
  27. 27. class Sample {text = "Meow";test() {var func1 = function () {alert(this.text);};var func2 = () => {alert(this.text);};func1(); // undefinedfunc2(); // Meow}}new Sample().test();アロースタイルは便利• 1つ外側の this が利用可能• 不都合がない限りアロースタイルでTSSample.prototype.test = function () {var _this = this;var func1 = function () {alert(this.text);};var func2 = function () {alert(_this.text);};func1();func2();};JShttp://goo.gl/K6MU7一部略27
  28. 28. 複雑なJSのthis事情…• JavaScriptではthisが何を指すかは結構複雑• アロースタイルの導入で多少楽ができるvar hoge = {foo: "bar",print: function () {console.log(this.foo);}};// 何かに所属している時のthisなので bar と表示hoge.print();var paramour = {foo: "NTR"};// thisをすり替えられたので NTR と表示hoge.print.call(paramour);JShttp://goo.gl/fVMGK参考:Qiita28
  29. 29. 引数について• 省略可能引数• デフォルト値付き引数• 可変長引数var func1 = (str?:string) => alert(str);func1();func1("Hello world");var func2 = (str = "Hello world") => alert(str);func2();func2("Hello world");var func3 = (...strs:string[]) => alert(strs.join(" "));func3();func3("Hello", "world");http://goo.gl/Bt83S29
  30. 30. module Sample {export class Test {static text = "Hello world";}class Internal {}}alert(Sample.Test.text);var Sample;(function (Sample) {var Test = (function () {function Test() { }Test.text = "Hello world";return Test;})();Sample.Test = Test;var Internal = (function () {function Internal() { }return Internal;})();})(Sample || (Sample = {}));alert(Sample.Test.text);モジュールについて• C# のnamespace• Java のpackage• ネストも可能TShttp://goo.gl/R7IK8JS30
  31. 31. interface Animal { walk(); }interface Cat extends Animal { meow(); }class NorwegianForestCat implements Cat {walk() {alert("四足とことこ");}meow() {alert("にゃーん");}brushing() {alert("毛が長いですごしごし");}}var doWalk = (animal:Animal) => animal.walk();doWalk(new NorwegianForestCat());インターフェースについて• C# や Java の interface と同じTShttp://goo.gl/RNH8J31
  32. 32. 構造的部分型• interface = 満たすべき仕様• 仕様があってりゃえじゃないかTSinterface MusicPlayer {play(title:string);}var gameMusicPlayer =(player:MusicPlayer) => {player.play("Baba yetu");}// MusicPlayerを実装しているclass Mp3Player implements MusicPlayer {play(title:string) {alert(title + "を再生します。");}}gameMusicPlayer(new Mp3Player());// MusicPlayerが要求するものを全て持っているclass 路上音楽家 {play(title:string) {alert(title + "がご希望ですか!");}}gameMusicPlayer(new 路上音楽家());// 実はクラスじゃなくても仕様を満たせばOKgameMusicPlayer({play: (title:string) => {alert(title + "の再生")}});http://goo.gl/JpjF332
  33. 33. 構造的部分型interface Settings {method:string;url:string;cache?:bool;}var doAjax = (settings:Settings) => {// あれやこれや};var settings:Settings = {method: "POST",url: "http://topgate.co.jp/"};doAjax(settings);TS• 実はかなり便利な考え方• 既存のJavaScriptコードとの互換性• 引数としての設定値の作成http://goo.gl/oAArp33
  34. 34. public, private• メソッドやプロパティをprivateに• コンパイル時チェックのみ• publicもprivateも生成されるJavaScriptに違いclass Sample {private test1() {}public test2() {}}var sample = new Sample();sample.test1();sample.test2();var Sample = (function () {function Sample() { }Sample.prototype.test1 = function () {};Sample.prototype.test2 = function () {};return Sample;})();var sample = new Sample();sample.test1();sample.test2();エラーTS JShttp://goo.gl/5UTb234
  35. 35. class A {constructor(public str:string, public num:number){}}class B {constructor(private a:A, public bool:bool){}get str() { return this.a.str; }get num() { return this.a.num; }}var b = new B(new A("vvakame", 29), true);alert(b.str + " " + b.num + " " + b.bool);getter, setter• get, set アクセサが定義できる• サーバから貰った複数のデータを合成したりするのに思いのほか便利TShttp://goo.gl/V5pNv35
  36. 36. cast• <any> 最強です 稀に使います• TypeScriptの利点が失われるので極力使用しちゃあダメ!TSclass A {}class B {}var b1:B = new A();var b2:B = <B> new A();var b3:B = <any> new A();両方エラーhttp://goo.gl/12KMc36
  37. 37. enum• 一応あるよー、とだけ…• わかめ的には文字列で欲しい…• ↑Java脳 .name() .valueOf(String)TSenum Sample {A, B, C, D = 10}alert(Sample.B.toString());http://goo.gl/A9wfZ37
  38. 38. interface Message {new (str:string):{showMessage();};}var func = (messageClass:Message) => {new messageClass("Hello").showMessage();};class MessageImpl {constructor(public str:string){}showMessage() { alert(this.str); }}func(MessageImpl);複雑な型• new できる関数を表す型• 以下のプロパティを持つ…TShttp://goo.gl/0Tp8s38
  39. 39. class Sample {show(str:string):void;show(num:number):void;show(obj:any) {if (typeof obj === "string") {alert("string:" + obj);} else if (typeof obj === "number") {alert("number:" + obj);} else {alert("object:" + obj);}}}new Sample().show("str");new Sample().show(1);// new Sample().show({});複雑な型• メソッドのオーバーロードTShttp://goo.gl/GmJiV39
  40. 40. 実践!TypeScript40
  41. 41. 既存資産の活用• 型指定ファイルを作成• .d.ts という拡張子• http://goo.gl/jrvH5• 普通のtsコンパイルで.d.tsの出力も可能• Roadmapでは0.9.xで集積サイトが…• →2月くらいに記述が消えた(´・#・`)41
  42. 42. 既存資産の活用interface IScope {// Documentation says exp is optional, but actual implementaton counts on it$apply(exp: string): any;$apply(exp: (scope: IScope) => any): any;$broadcast(name: string, ...args: any[]): IAngularEvent;$destroy(): void;$digest(): void;$emit(name: string, ...args: any[]): IAngularEvent;// Documentation says exp is optional, but actual implementaton counts on it$eval(expression: string): any;$eval(expression: (scope: IScope) => any): any;// Documentation says exp is optional, but actual implementaton counts on it$evalAsync(expression: string): void;$evalAsync(expression: (scope: IScope) => any): void;// Defaults to false by the implementation checking strategy• AngularJS の場合• angular.d.ts を利用 http://goo.gl/9NrZ442
  43. 43. 既存資産の活用• 構造的部分型が大変良い!• 整合性があっていればちゃんと使える• JavaScriptの文化に馴染みやすいinterface Settings {method:string;url:string;}var doAjax = (settings:Settings) => { ... };doAjax({url: "http://topgate.co.jp/"});TS不足があればコンパイルエラーになるhttp://goo.gl/mv1To43
  44. 44. 開発環境• VisualStudio • 王道• WebStorm • JetBrains社 最近AndroidStudio出した• Macユーザにオススメ• わかめはWebStormしかわかりません44
  45. 45. サンプルコードを試す• git clone git://github.com/vvakame/typescript-project-sample.git• 上記ディレクトリ直下で• npm install• bower install• tsd install jquery• grunt test• grunt && node app.js45
  46. 46. npm• Node.js用パッケージ管理ツール• TypeScriptも使ってます!• 新規コマンドのインストール -g• プロジェクト単位の依存性解決• package.jsonに依存関係を書く46
  47. 47. grunt• Node.jsベースのタスク自動化ツール• npmでgrunt用タスクがたくさん!• プロジェクト内の設定共有も用意に• grunt-typescript などが便利• Gruntfile.js に設定を書く47
  48. 48. bower• フロントエンドのJavaScript用パッケージ管理ツール• bower.json に依存関係の設定を書く48
  49. 49. tsd• TypeScriptの型情報定義ファイル .d.ts の管理ツール• .d.ts については後述• まだまだ発展途上…49
  50. 50. 必要なもののインストール• npm install -g typescript• npm install -g grunt-cli tsd bower• phantomjs http://phantomjs.org/npm は nodebrew やchocolatey とかで入れる50
  51. 51. TypeScript利用事例51
  52. 52. TOPGATE社内利用例+onGAE/Java52
  53. 53. TOPGATE社内利用例• 現在1案件で利用中 (完了• 工数3人月くらい (プログラマ2名• AngularJS + TypeScript | GAE/J • サーバ側UnitTestでクライアント側UnitTest用のテストデータを生成• CIサーバではPhantomsJSを活用53
  54. 54. TOPGATE社内利用例• サーバとのデータ受け渡し• サーバ側モデルと 1:1 対応する形でクライアント側でもクラスを作成• get, set アクセサが大変役に立つ• Genericsが無かったので少し危なっかしい• エンバグ率が結構高い…54
  55. 55. TOPGATE社内利用例• 設計変更やメソッドの変更に強い!• エラーはコンパイル時に検出できる• 複数人開発でも安心して開発できる• JavaScriptよりスキルレベル差が出にくい• ロジックの実装に集中できる• データ欠けの出元を追い回す事が減った55
  56. 56. TOPGATE社内利用例• JSライブラリを使う時にまず .d.ts 書く所から始めないといけない率が高い• AngularJSのHTML記述部分が静的にチェックできない…• 割りとよくバグる• デバッグがJavaScriptより大変• SourceMapやconcatされたJSが相手…56
  57. 57. TOPGATE社内利用例• 総括• TOPGATE社はTypeScriptを続けるよ!57
  58. 58. これからのTypeScript58
  59. 59. 0.9の話• 現行は0.8.3です• bool 型が boolean になったり• Genericsが入ったり• その他色々• http://goo.gl/d7rYK• http://goo.gl/IFkxl59
  60. 60. Genericsclass ProcessedHttpPromiseImpl<T> {constructor(public promise:ng.IHttpPromise,public preProcess:(data:any)=>T) {}success(callback:(data:T)=>void):ProcessedHttpPromise {this.promise.success((original:any)=> {var data:T = this.preProcess(original);callback(data);});return this;}error(callback:HttpPromiseCallback):ProcessedHttpPromise {this.promise.error(callback);return this;}}var promise: ProcessedHttpPromiseImpl<Sample> = ...;promise.success((data) => {// data は Sample としてしっかり型チェックされる// Genericsがなかったらここは any で扱うしかない…!data.test();});TS60
  61. 61. • .d.ts 用• 引数に応じて帰ってくるものの型が変わるSpecialized Signaturesinterface Document {createElement(tagName: string): HTMLElement;createElement(tagName: "div"): HTMLDivElement;createElement(tagName: "span"): HTMLSpanElement;createElement(tagName: "canvas"): HTMLCanvasElement;}61
  62. 62. 参考62
  63. 63. 参考• G+ TypeScript • http://goo.gl/RINqk • わかめはてブ• http://goo.gl/pUdoD • TypeScript クイックガイド• http://phyzkit.net/typescript/63
  64. 64. 参考• Playground • http://goo.gl/dix4F • Spec • http://goo.gl/0PjYT • DefinitelyTyped • http://vvaka.me/WYHzGT 64
  65. 65. ご清聴ありがとうございました。教育案件や技術コンサルもやってます。65

×