TypeScriptの型表現

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

Transcript

1. TypeScriptの型表現

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

   

   View Slide

2. Profile

   - ponday (Honda, Yusuke)

   - 株式会社ベガコーポレーション

   - 最近の仕事はUIデザイン（自分でもびっくり）

   - 副業もやってます

   

   View Slide

3. TypeScript　＝　JavaScript　＋　型

   

   View Slide

4. 型が書けるだけ？

   

   View Slide

5. TypeScriptの型

   - JavaScriptは動的型付け

   - 静的型付けの仕組みだけだと表現力不足

   - 条件によって型が変動するなど

   - TypeScriptの表現力が追いつかないとき ＝ any

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

   

   View Slide

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

   

   View Slide

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

   

   View Slide

8. any 型

   - あらゆる型と互換性がある特殊な型

   - どんな型からでも変換できる

   - どんな型にも変換できる

   - 正しく動作するかは気にしない

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

   

   View Slide

9. any 型の問題点

   - 型検査ができない

   - 意図しない型が代入されても検知できない

   - 存在しないプロパティにアクセスしても検知できない

   - 型検査で予防できるはずのエラーが実行時エラーに

   - 補完が効かない

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

   

   View Slide

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

    

    View Slide

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

    

    View Slide

12. とはいえ

    

    View Slide

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

    

    View Slide

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

    

    View Slide

15. Static types for dynamically named properties

    - バージョン2.1で追加

    - keyof キーワードと T[K] という記法からなる

    - keyof Tは型Tのプロパティを列挙する

    - T[K]は型TのプロパティKの型を示す

    

    View Slide

16. View Slide

17. この関数の型は？

    

    View Slide

18. こう書ける

    

    View Slide

19. View Slide

20. Mapped Types

    - バージョン2.1で追加

    - ある型が持つプロパティを走査して新しい型を作る

    - keyofやT[K]などと組み合わせて使うことが多い

    

    View Slide

21. View Slide

22. Conditional Types

    - バージョン2.8で追加

    - 型を条件分岐で変化させる

    - 三項演算子の記法と同じ

    

    View Slide

23. View Slide

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

    

    View Slide

25. ただ

    

    View Slide

26. わかりづらくない？

    

    View Slide

27. TypeScriptの組み込み型関数

    - 汎用的なイディオムをまとめた型関数

    - 内部でConditional Typesなどを活用

    - よく使うものはわりと揃っている印象

    - これを使うだけでもある程度表現力が広がる

    

    View Slide

28. Partial

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

    

    View Slide

29. Required

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

    

    View Slide

30. Readonly

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

    

    View Slide

31. Pick

    型TからプロパティKを抜き出す

    

    View Slide

32. Exclude

    型Uに代入可能な型Tを除去する

    

    View Slide

33. Extract

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

    

    View Slide

34. Extract

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

    

    View Slide

35. Parameters any>

    関数の引数の型を返す

    

    View Slide

36. ReturnType any>

    関数の戻り値の型を返す

    

    View Slide

37. 他にもいろいろ

    - NonNullable

    - ConstructorParameters any>

    - InstanceType any>

    - ThisType

    - Record

    

    View Slide

38. まとめ

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

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

    - TypeScriptの表現力もかなり向上している

    - anyに頼らざるを得ない場面も減ってきた

    - anyを使うより先にunknownを検討すべき

    - 組み込み型だけでも表現できる幅は結構広がる

    

    View Slide