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