型定義ファイルのある開発
TypeScript勉強会 VSハッカソン倶楽部
@vvakame
わかめ まさひろ
GAE
Android
TypeScript
AngularJS
@vvakame
• Google App Engine!
• Android!
• Google Apps!
などなど、!
!
!
技術に特化した会社です。!
Microsoft?
宣伝
TypeScriptリファレンス
紙・電子共 好評発売中!
Amazon(紙, Kindle)
達人出版会(PDF)
おさらい:TypeScriptの特長
TypeScriptチートシート
goo.gl/QiXe8t
TypeScriptの特長
• TypeScriptはJavaScriptを拡張した言語!
• 静的型付け!!
• ECMAScript 6規格の文法を先取り☆!
• 読みやすい変換後JavaScript!
• Java, C# とかに優しい言...
TypeScriptといえば…
静的型付
0
12.5
25
37.5
50
人数
型は必要 型は不要
型は必要!
出典:民明書房 - 激烈!天下一altJS武闘会 - より
Why needs 型?
• 多くのエラーをコンパイル時に!
• 実行時エラーはもううんざり!!
• 間違った使い方は不可能に!
• リファクタリングも安心確実!!
• コンパイルが通ればある程度動く!!
• IDEなどのサポートが得られやすい...
TypeScriptでの型
• primitive type 御三家!
• number!
• string!
• boolean
JS完全互換!
TypeScriptでの型
• 忘れちゃならない!
• any!
• void
JS完全互換!
TypeScriptでの型
• class!
• 実体も型も存在するイケメン!
• interface!
• 地味 型しか存在しない!
• object type literal!
• ↑TypeScriptリファレンス参照!
• 雑に説明する...
TypeScriptでの型
• ECMAScriptにいるやつ!
• DateとかArrayとかFunctionとか!
• ブラウザにいるやつ!
• windowとかDOM系のやつとか
↑結局classかinterface
TypeScript & JavaScript
• JSのライブラリが使いたい!!
• jQuery!
• AngularJS!
• mocha!
• etc…!
• お任せください!
@Neri78さんの
解説を思い出そう!
DefinitelyTyped
definitely/déf(ə)nətli/
→define
副詞more ∼; most ∼
2 明確に, はっきりと〈断る述べる決めるなど〉.
type/ta p/
語源は「打ってできた形型」
(形)typica...
型定義ファイル .d.ts
Over 450!
interface Moment {
!
format(format: string): string;
format(): string;
!
fromNow(withoutSuffix?: boolean): string;
!
start...
型定義ファイルの探し方
DefinitelyTypedで探す
• github.com/borisyankov/DefinitelyTyped!
• GitHub!
• t キーで頑張る!
• tsd!
• definitelytyped.org/tsd/!
• NuGet...
世界貢献!
.d.ts 利用例
• FunScript!
• F# to JavaScript!
• Scala.js!
• scala.js ts importer!
• dts-parser!
• TypedCoffeeScript by mizchi
in Pure JavaScript
• WebStorm (JetBrains社のIDE)!
• 通常のJSコード書きにも使える!!
• JavaScript > Libraries > Download > 

TypeScript com...
.d.ts = 大統一型定義ファイル
•つよい!!
•すごい!!
•やばい!
是非
• TypeScript固有の事情が入るよね!
• WebIDLとか使ったほうがよくね?!
• しかし、多くの人は今すぐ使いたい!
• DefinitelyTyped、450もあるらしっすよ!
• ↑大正義
より良い解が見つかるといいな
まとめ
↓ JavaScriptより強い安全性を求め!
↓ 静的型チェックのない世界殺すマン!
↓ しかし既存JS資産は活用したい…!
↓ 型定義ファイル、必要です!!
↓ それ、DefinitelyTypedにあるよ
.d.ts 作る?
Pros/Cons
• Pros!
• ライブラリへの理解が深まる!
• 後の安心が手に入る!
• Cons!
• 作業前工数が膨れ上がる!
• 書き方を学習するのが大変
みんなはどう思うかな?
Pros/Cons
• Pros!
• ライブラリへの理解が深まる!
• 後の安心が手に入る!
• Cons!
• 作業前工数が膨れ上がる!
• 書き方を学習するのが大変
作業工数?
弊社 No.2 TypeScripter
Grapswizさんの感想
作業工数?
• ぶっちゃけ趣味プログラミング中では
マジであります。!
• 仕事の場合は最低限使える範囲を

パパっとやって、終わりっ!!
• 型定義貯金!
• キッチリやると後々デバッグ時間の

削減という形で還元されてくる
書き方の学習
• 基本はTypeScriptを踏襲!
• トップレベルには declare をつける!
• 実装を書けないことに留意!
• モジュールの書き方!
• 内部モジュール!
• 外部モジュール
TypeScript
難易度の頂
.d.ts 作る!!
How to write .d.ts?
• 普通にライブラリ使う時と変わらない!
• APIリファレンスを読む!
• 実装を読む!
• 実行してみて確かめる
時間余ったら実演します
やってはいけない!
• 無駄に凝る
てきとーにやろ
結論
• コンパイルが通ればいいんだよ!
ただし—noImplicitAny
非対応はギルティ
向き・不向き
• TypeScriptに不向きなライブラリもある!
• 独自のOOPの仕組みを持つもの!
• データ入れるとクラスが返るやつ!
• 主にDBのORマッパが多い!
• Sequelizeの例
⃝⃝言語にある☓☓があれば解決するのに...
避けないほうがいい知識
• 内部・外部モジュール!
• TypeScriptリファレンス参照!
• teppeisさんのBlog参照!
• www.typescriptlang.org/Handbook!
• 誰か許可とって翻訳してください><...
anyを使う
• とりあえずコンパイル通る!!
• A. まずany、後から詳細化していく!
作れる = 正義!
anyを使う
• とりあえずコンパイル通る!!
• A. まずany、後から詳細化していく!
• B. 利用側コードに必要なとこ作る
PRはBの方が送りやすい
declare var $: any; ←流石にコレは困る
new operator
• new 演算子を使う対象!
• class!
• interface (class decomposition)!
• 具体例!
• goo.gl/qD60Vi
interfaceが主流?
new operator
• 何故クラスを分解するのか?!
• interfaceは後付で拡張できる!
• だいたいJavaScriptのせい!
• Aライブラリを勝手に拡張する

Bライブラリ!
• ↑interfaceじゃないと対応できない
new operator
• interfaceの利点!
• 別ライブラリの拡張に耐える!!
• 具体例 goo.gl/nHMTqu!
• interfaceの欠点!
• 継承できない!!
• 具体例 goo.gl/QOO8yl
用途を考え
c...
命名規則
• JSの流儀に従う!
• クラス名は先頭大文字 Sample!
• モジュール名もかな…!
• 変数、メソッド キャメルケース fooBar!
• インタフェースは先頭I付き ISample!
• ↑賛否両論 ちょとおすすめ ぐらい...
オブジェクト型リテラル
• キッチリ理解すると柔軟な表現が可能!
• これだけで1時間話せるレベル!
• TSチートシート goo.gl/QiXe8t!
• TSリファレンス goo.gl/G9gzeu
非インスタンス化モジュール
• 型定義を作る時の便利なテクニック!!
• 具体例 goo.gl/xVNmYD!
• わかめの後悔!
• non instantiated module!
• 非インスタンス化モジュールと訳した!
• 幽霊モジュー...
関数とモジュールの定義統合
• 具体例 goo.gl/F7tvg6!
• なんでこんなことできるの?!
• JavaScriptでできるから(たぶん
オーバーロード
• any, Function, …args: any[] からの脱皮!
• より優れたコンパイル時エラー検出!
• 様々な引数に対応する!
• 文字列リテラルによる特殊化!
• 引数によって異なる型を返す
pull requestを送ろう!
作ったものは共有しよう
• 他の人が楽できるぞ!!
• 自分が楽できるのも誰かのおかげ!!
• 誰かが完成させてくれるかも?!
• 誰かがバグ直してくれるかも?
主に下2つが重要
pull request?
• GitHubにはpull requestがある!
• PRと略されることも!
• fork→commit→push→PR!!
• GitHub実践入門が良書らしい
PR童貞が許されるのは高校生までだよね∼w
具体的に
• Qiitaに解説記事書いた!
• DefinitelyTyped公式解説もある!
• コミッタに日本人がいる→!
• ↑当然日本語が喋れる!
• ちなみに英語は不自由
ん?
• もし、あなたがPR未経験なら…!
• DefinitelyTypedにPRを出そう!!
• たくさんの型定義の集合!
• 全体を把握しなくても追加できる!!
• 1文字だけの修正のPRも大歓迎!
Live Writing
自分用メモ
antigen theme imajes
⌘ Shift +
⌘ Shift 0
• 適当なライブラリを調べて書く!
• Bacon.js 良さそう!
• その場で選んでもらう?
どっちにしよ?
3分で決めよう!
かもん!しつもん!
だいたい全部書いてある
1時間で喋りきれない事
多すぎんよ∼ww
Amazon(紙, Kindle)
達人出版会(PDF)
Upcoming SlideShare
Loading in...5
×

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

6,564

Published on

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

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

No Downloads
Views
Total Views
6,564
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
32
Comments
0
Likes
28
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×