TypeScriptの型表現

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

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の型を示す

17. この関数の型は？

18. こう書ける

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

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

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