TypeScriptの型表現

Transcript

1. 1.

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


2. 2.

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

   副業もやってます

3. 3.

   TypeScript　＝　JavaScript　＋　型


4. 4.

   型が書けるだけ？


5. 5.

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

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

6. 6.

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


7. 7.

   (屮ﾟДﾟ)屮 ⌒┻━┻


8. 8.

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


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

9. 9.

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


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

10. 10.

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


11. 11.

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


12. 12.

    とはいえ


13. 13.

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


14. 14.

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


15. 15.

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

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

16. 16.

    None
17. 17.

    この関数の型は？


18. 18.

    こう書ける


19. 19.

    None
20. 20.

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


21. 21.

    None
22. 22.

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


23. 23.

    None
24. 24.

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


25. 25.

    ただ


26. 26.

    わかりづらくない？


27. 27.

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


28. 28.

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


29. 29.

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


30. 30.

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


31. 31.

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


32. 32.

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


33. 33.

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


34. 34.

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


35. 35.

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


36. 36.

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


37. 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. 38.

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

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