TypeScriptの型表現

Transcript

1. TypeScriptの型表現
 FukuokaJS #8『TypeScript』 / May 15th, 2019 ponday (@ponday_dev)


2. Profile
 - ponday (Honda, Yusuke)
 - 株式会社ベガコーポレーション
 - 最近の仕事はUIデザイン（自分でもびっくり）
 -

   副業もやってます


3. TypeScript　＝　JavaScript　＋　型


4. 型が書けるだけ？


5. TypeScriptの型
 - JavaScriptは動的型付け
 - 静的型付けの仕組みだけだと表現力不足
 - 条件によって型が変動するなど
 - TypeScriptの表現力が追いつかないとき ＝

   any
 - 最近なら unknown型 を使ったほうが良い


6. 型よくわかんないから とりあえずany で！


7. (屮ﾟДﾟ)屮 ⌒┻━┻


8. any 型
 - あらゆる型と互換性がある特殊な型
 - どんな型からでも変換できる
 - どんな型にも変換できる
 - 正しく動作するかは気にしない


   - TypeScriptの型システムを無視してしまう


9. any 型の問題点
 - 型検査ができない
 - 意図しない型が代入されても検知できない
 - 存在しないプロパティにアクセスしても検知できない
 - 型検査で予防できるはずのエラーが実行時エラーに


   - 補完が効かない
 - 型推論ができないことによる副作用


10. anyを使う　≒　TypeScriptの恩恵を捨てる


11. 基本的に anyは使わないほうが良い


12. とはいえ


13. TypeScriptの表現力が足りないときは any だった


14. 型の表現力を高める仕組み が追加


15. Static types for dynamically named properties
 - バージョン2.1で追加
 - keyof

    キーワードと T[K] という記法からなる
 - keyof Tは型Tのプロパティを列挙する
 - T[K]は型TのプロパティKの型を示す

16. None

17. この関数の型は？


18. こう書ける


19. None

20. Mapped Types
 - バージョン2.1で追加
 - ある型が持つプロパティを走査して新しい型を作る
 - keyofやT[K]などと組み合わせて使うことが多い


21. None

22. Conditional Types
 - バージョン2.8で追加
 - 型を条件分岐で変化させる
 - 三項演算子の記法と同じ


23. None

24. これらを組み合わせると 定義できる型の幅はすごく広がる


25. ただ


26. わかりづらくない？


27. TypeScriptの組み込み型関数
 - 汎用的なイディオムをまとめた型関数
 - 内部でConditional Typesなどを活用
 - よく使うものはわりと揃っている印象
 - これを使うだけでもある程度表現力が広がる


28. Partial<T>
 型TのプロパティをNullableにする


29. Required<T>
 型TのプロパティをNonNullableにする（Partialの逆）


30. Readonly<T>
 型Tのプロパティに readonly を付与する


31. Pick<T, K extends keyof T>
 型TからプロパティKを抜き出す


32. Exclude<T, U>
 型Uに代入可能な型Tを除去する


33. Extract<T, U>
 型Uに代入可能な型Tのみを取り出す（Excludeの逆）


34. Extract<T, U>
 型Uに代入可能な型Tのみを取り出す（Excludeの逆）


35. Parameters<T extends (...args: any[]) => any>
 関数の引数の型を返す


36. ReturnType<T extends (...args: any[]) => any>
 関数の戻り値の型を返す


37. 他にもいろいろ
 - NonNullable<T>
 - ConstructorParameters<T extends new (...args: any[]) =>

    any>
 - InstanceType<T extends new (...args:any[]) => any>
 - ThisType<T>
 - Record<K extends keyof any, T>


38. まとめ
 - anyはTypeScriptの型システムを無視してしまう
 - 基本的にanyは使わないほうが良い
 - TypeScriptの表現力もかなり向上している
 - anyに頼らざるを得ない場面も減ってきた
 -

    anyを使うより先にunknownを検討すべき
 - 組み込み型だけでも表現できる幅は結構広がる