TypeScriptの型表現 - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

TypeScript　＝　JavaScript　＋　型 

Slide 4

Slide 4 text

型が書けるだけ？ 

Slide 5

Slide 5 text

TypeScriptの型  - JavaScriptは動的型付け  - 静的型付けの仕組みだけだと表現力不足  - 条件によって型が変動するなど  - TypeScriptの表現力が追いつかないとき＝ any  - 最近なら unknown型を使ったほうが良い 

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

(屮ﾟДﾟ)屮 ⌒┻━┻ 

Slide 8

Slide 8 text

any 型  - あらゆる型と互換性がある特殊な型  - どんな型からでも変換できる  - どんな型にも変換できる  - 正しく動作するかは気にしない  - TypeScriptの型システムを無視してしまう 

Slide 9

Slide 9 text

any 型の問題点  - 型検査ができない  - 意図しない型が代入されても検知できない  - 存在しないプロパティにアクセスしても検知できない  - 型検査で予防できるはずのエラーが実行時エラーに  - 補完が効かない  - 型推論ができないことによる副作用 

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

とはいえ 

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Static types for dynamically named properties  - バージョン2.1で追加  - keyof キーワードと T[K] という記法からなる  - keyof Tは型Tのプロパティを列挙する  - T[K]は型TのプロパティKの型を示す 

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

この関数の型は？ 

Slide 18

Slide 18 text

こう書ける 

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

ただ 

Slide 26

Slide 26 text

わかりづらくない？ 

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Parameters any>  関数の引数の型を返す 

Slide 36

Slide 36 text

ReturnType any>  関数の戻り値の型を返す 

Slide 37

Slide 37 text

他にもいろいろ  - NonNullable  - ConstructorParameters any>  - InstanceType any>  - ThisType  - Record 

Slide 38

Slide 38 text

まとめ  - anyはTypeScriptの型システムを無視してしまう  - 基本的にanyは使わないほうが良い  - TypeScriptの表現力もかなり向上している  - anyに頼らざるを得ない場面も減ってきた  - anyを使うより先にunknownを検討すべき  - 組み込み型だけでも表現できる幅は結構広がる 