TypeScriptは明日から使うべき
- 1. TypeScriptは明日から使うべき MTI 技術の泉 @vvakame
- 2. わかめ まさひろ GAE Android @v vakame TypeScript AngularJS
- 3. • Google App Engine! • Android! • Google Apps! などなど、! ! ! 技術に特化した会社です。! Microsoft?
- 5. Type? • Type = 型! • 型は多くのプログラミング言語に存在! • “型”の扱いには言語ごとに優劣がある! • 静的型付け! • 動的型付け
- 6. 静的型付け • 静的解析で多くの整合性検査が可能! • 不整合があったらコンパイルエラー! • int hoge = “Hoge”;! • ↑エラー！! • 大規模・大人数 になるほど利点⤴! • Java・C# などが有名
- 7. 動的型付け • 型がないわけではないんだけども…! • 静的に検証しない(できない! • hoge = “Hi!” ; hoge = 1 ;! • 問題なし！(ある場合もある! • テストの重要性⤴ 大人数開発…⤵! • Ruby・Python などが有名
- 8. static vs dynamic 一体、どっちがいいの？
- 11. 時代は静的型付けだ！ • 動的型付けの利点は確かにある! • テスト書きやすい! • 黒魔術しやすい! • デメリットもある! • テストしっかり書かないと死ぬ! • リファクタリングめっちゃ怖い
- 12. 王者 JavaScript • 昔はOFFにしとけとか言われてたのに! • 今や花形ですよ！! • JavaScript実行しない日があるだろうか! • いや、ない！
- 13. だがしかし… • しかしJavaScriptさんはマジガバガバ! • 動的型付けだしー! • そんな言語仕様でいいんですか…？! • クラス無い! • prototypeとかいうのはある(小声! • モジュール(パッケージ)無い! • 安全に開発できない！！！
- 14. そこでTypeScriptですよ • 静的型付けなJavaScript！! • クラスある！! • モジュールある！ サイキョーやん？
- 15. TypeScriptの特長
- 16. TypeScriptの特長 • TypeScriptはJavaScriptを拡張した言語! • 静的型付け！! • ECMAScript 6規格の文法を先取り☆! • 読みやすい変換後JavaScript! • Java, C# とかに優しい言語仕様! • 長いコンパイル時間 → 1.1.0 で改善 最も現実的なaltJSだ！
- 17. 親Microsoft情報 • Microsoftが作ってる! • Visual Studio がサポートしている！! • C#作者が作ってる！ でも僕はMacで使ってる
- 18. Why needs 型？ • 多くのエラーをコンパイル時に! • 実行時エラーはもううんざり！! • 間違った使い方は不可能に! • リファクタリングも安心確実！! • コンパイルが通ればある程度動く！! • IDEなどのサポートが得られやすい JS完全互換！
- 19. TypeScriptでの型 • primitive type 御三家! • number! • string! • boolean JS完全互換！
- 20. TypeScriptでの型 • 忘れちゃならない! • any! • void JS完全互換！
- 21. TypeScriptでの型 • class! • 実体も型も存在するイケメン! • interface! • 地味 型しか存在しない! • object type literal! • ↑TypeScriptリファレンス参照! • 雑に説明すると即席interface module君も一応いる
- 22. TypeScriptでの型 • ECMAScriptにいるやつ! • DateとかArrayとかFunctionとか! • ブラウザにいるやつ! • windowとかDOM系のやつとか ↑結局classかinterface
- 24. 型注釈 var str1: string = "string"; var str2: number = "string"; // エラー！ var str3 = "string"; // 初期化子の型から型推論されstringを指定したのと等価 str3 = 1; // エラー！ ! var b: boolean = true; var n: number = 1; ! var a: any = true; a = 1; // any は何でもOK！ http://goo.gl/jKVeHw
- 25. クラス http://goo.gl/l3zjBi class Hoge { name: string; constructor(name: string) { this.name = name; } hello(): string{ return "Hello, " + this.name; } } ! var obj = new Hoge("world"); window.alert(obj.hello());
- 26. インタフェース http://goo.gl/GQD89G interface IHoge { str: string; num: number; } ! var obj: IHoge = { str: "string", num: 1 }; ! window.alert(obj.str + obj.num);
- 27. 内部モジュール http://goo.gl/gvjgTU module sample { export var str = "string"; export class Hoge { hello(word: string): string { return "Hello, " + word; } } } module sample2 { // SampleB.Hoge を Piyoとしてインポート import Piyo = sample.Hoge; export var str = new Piyo().hello("TypeScript"); } window.alert(sample2.str);
- 29. TypeScript & JavaScript • JSのライブラリが使いたい！! • jQuery! • AngularJS! • mocha! • etc…! • お任せください！ 既存資産も使う！
- 30. DefinitelyTyped github.com/borisyankov/DefinitelyTyped definitely/déf(ə)nətli/ →define 副詞more ～; most ～ 2 明確に, はっきりと〈断る述べる決めるなど〉. type/taɪp/ 〖語源は「打ってできた形型」〗 (形)typical, (副)typically 名詞複～s/-s/ 1 C(ある特性を共有する)型, タイプ, 類型; 種類(kind2, sort) ウィズダム英和辞典より definitelytyped.org I’m committer!
- 31. 型定義ファイル .d.ts Over 550!
- 32. 既存JSに型を後付けする interface Moment { ! format(format: string): string; format(): string; ! fromNow(withoutSuffix?: boolean): string; ! startOf(soort: string): Moment; endOf(soort: string): Moment; ! add(input: MomentInput): Moment; add(soort: string, aantal: number): Moment; add(duration: Duration): Moment; subtract(input: MomentInput): Moment; subtract(soort: string, aantal: number): Moment; ! calendar(): string; clone(): Moment; ! valueOf(): number; ! local(): Moment; // current date/time in local mode ! utc(): Moment; // current date/time in UTC mode ! isValid(): boolean; http://momentjs.com/ goo.gl/9QnuC3
- 33. 完全網羅！ TypeScriptリファレンス 紙･電子共 好評発売中！ Amazon(紙, Kindle) 達人出版会(PDF)
- 34. mozaic.fm #5 TypeScript #8 AltJS in LL Diver 2回くらい話した
- 35. 実際の開発風景 見学してみよう！
- 36. 質問？