TypeScriptの型表現

 TypeScriptの型表現

FukuokaJS #8 『TypeScript』(2019.05.15)の発表資料です。

52604f94a6d2172df2cad5ab45189940?s=128

ponday

May 15, 2019
Tweet

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を検討すべき
 - 組み込み型だけでも表現できる幅は結構広がる