Your SlideShare is downloading. ×
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部

6,006
views

Published on

http://vshtc.doorkeeper.jp/events/11407

http://vshtc.doorkeeper.jp/events/11407

Published in: Technology

0 Comments
27 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,006
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
29
Comments
0
Likes
27
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部 @vvakame
  • 2. わかめ まさひろ GAE Android TypeScript AngularJS @vvakame
  • 3. • Google App Engine! • Android! • Google Apps! などなど、! ! ! 技術に特化した会社です。! Microsoft?
  • 4. 宣伝 TypeScriptリファレンス 紙・電子共 好評発売中! Amazon(紙, Kindle) 達人出版会(PDF)
  • 5. おさらい:TypeScriptの特長 TypeScriptチートシート goo.gl/QiXe8t
  • 6. TypeScriptの特長 • TypeScriptはJavaScriptを拡張した言語! • 静的型付け!! • ECMAScript 6規格の文法を先取り☆! • 読みやすい変換後JavaScript! • Java, C# とかに優しい言語仕様! • 長いコンパイル時間 最も現実的なaltJSだ!
  • 7. TypeScriptといえば…
  • 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
  • 16. 型定義ファイル .d.ts Over 450!
  • 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
  • 23. .d.ts = 大統一型定義ファイル •つよい!! •すごい!! •やばい!
  • 24. 是非 • TypeScript固有の事情が入るよね! • WebIDLとか使ったほうがよくね?! • しかし、多くの人は今すぐ使いたい! • DefinitelyTyped、450もあるらしっすよ! • ↑大正義 より良い解が見つかるといいな
  • 25. まとめ ↓ JavaScriptより強い安全性を求め! ↓ 静的型チェックのない世界殺すマン! ↓ しかし既存JS資産は活用したい…! ↓ 型定義ファイル、必要です!! ↓ それ、DefinitelyTypedにあるよ
  • 26. .d.ts 作る?
  • 27. Pros/Cons • Pros! • ライブラリへの理解が深まる! • 後の安心が手に入る! • Cons! • 作業前工数が膨れ上がる! • 書き方を学習するのが大変 みんなはどう思うかな?
  • 28. Pros/Cons • Pros! • ライブラリへの理解が深まる! • 後の安心が手に入る! • Cons! • 作業前工数が膨れ上がる! • 書き方を学習するのが大変
  • 29. 作業工数? 弊社 No.2 TypeScripter Grapswizさんの感想
  • 30. 作業工数? • ぶっちゃけ趣味プログラミング中では マジであります。! • 仕事の場合は最低限使える範囲を
 パパっとやって、終わりっ!! • 型定義貯金! • キッチリやると後々デバッグ時間の
 削減という形で還元されてくる
  • 31. 書き方の学習 • 基本はTypeScriptを踏襲! • トップレベルには declare をつける! • 実装を書けないことに留意! • モジュールの書き方! • 内部モジュール! • 外部モジュール TypeScript 難易度の頂
  • 32. .d.ts 作る!!
  • 33. How to write .d.ts? • 普通にライブラリ使う時と変わらない! • APIリファレンスを読む! • 実装を読む! • 実行してみて確かめる 時間余ったら実演します
  • 34. やってはいけない! • 無駄に凝る てきとーにやろ
  • 35. 結論 • コンパイルが通ればいいんだよ! ただし—noImplicitAny 非対応はギルティ
  • 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[] からの脱皮! • より優れたコンパイル時エラー検出! • 様々な引数に対応する! • 文字列リテラルによる特殊化! • 引数によって異なる型を返す
  • 48. pull requestを送ろう!
  • 49. 作ったものは共有しよう • 他の人が楽できるぞ!! • 自分が楽できるのも誰かのおかげ!! • 誰かが完成させてくれるかも?! • 誰かがバグ直してくれるかも? 主に下2つが重要
  • 50. pull request? • GitHubにはpull requestがある! • PRと略されることも! • fork→commit→push→PR!! • GitHub実践入門が良書らしい PR童貞が許されるのは高校生までだよね∼w
  • 51. 具体的に • Qiitaに解説記事書いた! • DefinitelyTyped公式解説もある! • コミッタに日本人がいる→! • ↑当然日本語が喋れる! • ちなみに英語は不自由
  • 52. ん? • もし、あなたがPR未経験なら…! • DefinitelyTypedにPRを出そう!! • たくさんの型定義の集合! • 全体を把握しなくても追加できる!! • 1文字だけの修正のPRも大歓迎!
  • 53. Live Writing 自分用メモ antigen theme imajes ⌘ Shift + ⌘ Shift 0
  • 54. • 適当なライブラリを調べて書く! • Bacon.js 良さそう! • その場で選んでもらう? どっちにしよ? 3分で決めよう!
  • 55. かもん!しつもん!
  • 56. だいたい全部書いてある 1時間で喋りきれない事 多すぎんよ∼ww Amazon(紙, Kindle) 達人出版会(PDF)

×