TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
32 likes12,816 views
http://vshtc.doorkeeper.jp/events/11407
![オーバーロード
• any, Function, …args: any[] からの脱皮!
• より優れたコンパイル時エラー検出!
• 様々な引数に対応する!
• 文字列リテラルによる特殊化!
• 引数によって異なる型を返す](https://image.slidesharecdn.com/vs-hackathon-club-140614005525-phpapp01/85/TypeScript-TypeScript-VS-47-320.jpg)
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
- 3. • Google App Engine! • Android! • Google Apps! などなど、! ! ! 技術に特化した会社です。! Microsoft?
- 6. TypeScriptの特長 • TypeScriptはJavaScriptを拡張した言語! • 静的型付け！! • ECMAScript 6規格の文法を先取り☆! • 読みやすい変換後JavaScript! • Java, C# とかに優しい言語仕様! • 長いコンパイル時間 最も現実的なaltJSだ！
- 8. 静的型付 0 12.5 25 37.5 50 人数 型は必要 型は不要 型は必要！ 出典:民明書房 - 激烈！天下一altJS武闘会 - より
- 9. Why needs 型？ • 多くのエラーをコンパイル時に! • 実行時エラーはもううんざり！! • 間違った使い方は不可能に! • リファクタリングも安心確実！! • コンパイルが通ればある程度動く！! • IDEなどのサポートが得られやすい JS完全互換！
- 10. TypeScriptでの型 • primitive type 御三家! • number! • string! • boolean JS完全互換！
- 11. TypeScriptでの型 • 忘れちゃならない! • any! • void JS完全互換！
- 12. TypeScriptでの型 • class! • 実体も型も存在するイケメン! • interface! • 地味 型しか存在しない! • object type literal! • ↑TypeScriptリファレンス参照! • 雑に説明すると即興interface module君も一応いる
- 13. TypeScriptでの型 • ECMAScriptにいるやつ! • DateとかArrayとかFunctionとか! • ブラウザにいるやつ! • windowとかDOM系のやつとか ↑結局classかinterface
- 14. TypeScript & JavaScript • JSのライブラリが使いたい！! • jQuery! • AngularJS! • mocha! • etc…! • お任せください！ @Neri78さんの 解説を思い出そう！
- 15. DefinitelyTyped definitely/déf(ə)nətli/ →define 副詞more ∼; most ∼ 2 明確に, はっきりと〈断る述べる決めるなど〉. type/ta p/ 語源は「打ってできた形型」 (形)typical, (副)typically 名詞複∼s/-s/ 1 C(ある特性を共有する)型, タイプ, 類型; 種類(kind2, sort) ウィズダム英和辞典より I’m committer! definitelytyped.org github.com/borisyankov/DefinitelyTyped
- 17. 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 ! 既存JSに型を後付けする http://momentjs.com/ goo.gl/9QnuC3
- 18. 型定義ファイルの探し方
- 19. DefinitelyTypedで探す • github.com/borisyankov/DefinitelyTyped! • GitHub! • t キーで頑張る! • tsd! • definitelytyped.org/tsd/! • NuGet! • www.nuget.org/packages? q=DefinitelyTyped
- 20. 世界貢献！
- 21. .d.ts 利用例 • FunScript! • F# to JavaScript! • Scala.js! • scala.js ts importer! • dts-parser! • TypedCoffeeScript by mizchi
- 22. in Pure JavaScript • WebStorm (JetBrains社のIDE)! • 通常のJSコード書きにも使える！! • JavaScript > Libraries > Download > TypeScript community stubs
- 24. 是非 • TypeScript固有の事情が入るよね! • WebIDLとか使ったほうがよくね？! • しかし、多くの人は今すぐ使いたい! • DefinitelyTyped、450もあるらしっすよ! • ↑大正義 より良い解が見つかるといいな
- 25. まとめ ↓ JavaScriptより強い安全性を求め! ↓ 静的型チェックのない世界殺すマン! ↓ しかし既存JS資産は活用したい…! ↓ 型定義ファイル、必要です！! ↓ それ、DefinitelyTypedにあるよ
- 26. .d.ts 作る？
- 27. Pros/Cons • Pros! • ライブラリへの理解が深まる! • 後の安心が手に入る! • Cons! • 作業前工数が膨れ上がる! • 書き方を学習するのが大変 みんなはどう思うかな？
- 28. Pros/Cons • Pros! • ライブラリへの理解が深まる! • 後の安心が手に入る! • Cons! • 作業前工数が膨れ上がる! • 書き方を学習するのが大変
- 30. 作業工数？ • ぶっちゃけ趣味プログラミング中では マジであります。! • 仕事の場合は最低限使える範囲を パパっとやって、終わりっ！! • 型定義貯金! • キッチリやると後々デバッグ時間の 削減という形で還元されてくる
- 31. 書き方の学習 • 基本はTypeScriptを踏襲! • トップレベルには declare をつける! • 実装を書けないことに留意! • モジュールの書き方! • 内部モジュール! • 外部モジュール TypeScript 難易度の頂
- 32. .d.ts 作る！！
- 33. How to write .d.ts? • 普通にライブラリ使う時と変わらない! • APIリファレンスを読む! • 実装を読む! • 実行してみて確かめる 時間余ったら実演します
- 36. 向き・不向き • TypeScriptに不向きなライブラリもある! • 独自のOOPの仕組みを持つもの! • データ入れるとクラスが返るやつ! • 主にDBのORマッパが多い! • Sequelizeの例 ⃝⃝言語にある☓☓があれば解決するのに… という悩み、結構ある
- 37. 避けないほうがいい知識 • 内部・外部モジュール! • TypeScriptリファレンス参照! • teppeisさんのBlog参照! • www.typescriptlang.org/Handbook! • 誰か許可とって翻訳してください＞＜! • Class Decomposition が特に重要
- 38. anyを使う • とりあえずコンパイル通る！! • A. まずany、後から詳細化していく! 作れる = 正義！
- 39. anyを使う • とりあえずコンパイル通る！! • A. まずany、後から詳細化していく! • B. 利用側コードに必要なとこ作る PRはBの方が送りやすい declare var $: any; ←流石にコレは困る
- 40. new operator • new 演算子を使う対象! • class! • interface (class decomposition)! • 具体例! • goo.gl/qD60Vi interfaceが主流？
- 41. new operator • 何故クラスを分解するのか？! • interfaceは後付で拡張できる! • だいたいJavaScriptのせい! • Aライブラリを勝手に拡張する Bライブラリ! • ↑interfaceじゃないと対応できない
- 42. new operator • interfaceの利点! • 別ライブラリの拡張に耐える！! • 具体例 goo.gl/nHMTqu! • interfaceの欠点! • 継承できない！! • 具体例 goo.gl/QOO8yl 用途を考え classの利用を検討
- 43. 命名規則 • JSの流儀に従う! • クラス名は先頭大文字 Sample! • モジュール名もかな…! • 変数、メソッド キャメルケース fooBar! • インタフェースは先頭I付き ISample! • ↑賛否両論 ちょとおすすめ ぐらい C#erはメソッド先頭大文字多いですね それはどうかと思うけど…
- 44. オブジェクト型リテラル • キッチリ理解すると柔軟な表現が可能! • これだけで1時間話せるレベル! • TSチートシート goo.gl/QiXe8t! • TSリファレンス goo.gl/G9gzeu
- 45. 非インスタンス化モジュール • 型定義を作る時の便利なテクニック！! • 具体例 goo.gl/xVNmYD! • わかめの後悔! • non instantiated module! • 非インスタンス化モジュールと訳した! • 幽霊モジュール goo.gl/vlQGUF! • ↑わかりやすい… DTコミッタ @basarat 命名
- 46. 関数とモジュールの定義統合 • 具体例 goo.gl/F7tvg6! • なんでこんなことできるの？! • JavaScriptでできるから(たぶん
- 47. オーバーロード • any, Function, …args: any[] からの脱皮! • より優れたコンパイル時エラー検出! • 様々な引数に対応する! • 文字列リテラルによる特殊化! • 引数によって異なる型を返す
- 49. 作ったものは共有しよう • 他の人が楽できるぞ！! • 自分が楽できるのも誰かのおかげ！! • 誰かが完成させてくれるかも？! • 誰かがバグ直してくれるかも？ 主に下2つが重要
- 50. pull request? • GitHubにはpull requestがある! • PRと略されることも! • fork→commit→push→PR！! • GitHub実践入門が良書らしい PR童貞が許されるのは高校生までだよね∼ｗ
- 51. 具体的に • Qiitaに解説記事書いた! • DefinitelyTyped公式解説もある! • コミッタに日本人がいる→! • ↑当然日本語が喋れる! • ちなみに英語は不自由
- 52. ん？ • もし、あなたがPR未経験なら…! • DefinitelyTypedにPRを出そう！! • たくさんの型定義の集合! • 全体を把握しなくても追加できる！! • 1文字だけの修正のPRも大歓迎！
- 53. Live Writing 自分用メモ antigen theme imajes ⌘ Shift + ⌘ Shift 0
- 54. • 適当なライブラリを調べて書く! • Bacon.js 良さそう! • その場で選んでもらう？ どっちにしよ？ 3分で決めよう！
- 55. かもん！しつもん！