Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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を検討すべき - 組み込み型だけでも表現できる幅は結構広がる