Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
TypeScriptの型表現
ponday
May 15, 2019
Programming
10
2.6k
TypeScriptの型表現
FukuokaJS #8 『TypeScript』(2019.05.15)の発表資料です。
ponday
May 15, 2019
Tweet
Share
More Decks by ponday
See All by ponday
関数型でGoFのデザインパターンやってみる
honda
0
430
Web Componentsの今
honda
1
320
これまでのReact、これからのReact
honda
0
180
Gatsbyお試し
honda
0
81
styled-components or emotion?
honda
0
540
Web ComponentsとAngular
honda
0
80
Atomic Design周りについての私見
honda
1
400
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
550
Web Componentsの動向とPolymer
honda
4
1.6k
Other Decks in Programming
See All in Programming
Independently together: better developer experience & App performance
bcinarli
0
180
ES2022の新機能
smt7174
0
260
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @wad2022
manfredsteyer
PRO
0
130
git on intellij
hiroto_kitamura
0
170
1時間半で克服するJavaScriptの非同期処理/async_javascript_kokufuku
marchin1989
2
620
heyにおけるCI/CDの現状と課題
fufuhu
3
560
設計の学び方:自分流のススメ
masuda220
PRO
10
7.1k
Scrum Fest Osaka 2022/5年で200人になったスタートアップの アジャイル開発の歴史とリアル
atamaplus
1
930
チームでカレーを作ろう!アジャイルカレークッキング
akitotsukahara
0
850
#JJUG_CCC 「サポート」は製品開発? - JDBCライブラリ屋さんが実践する攻めのテクニカルサポートとJavaエンジニアのキャリアについて -
cdataj
0
420
設計ナイト2022 トランザクションスクリプト
shinpeim
11
2.1k
Amazon ECSのネットワーク関連コストの話
msato
0
650
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
Agile that works and the tools we love
rasmusluckow
319
19k
The Language of Interfaces
destraynor
148
20k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
4 Signs Your Business is Dying
shpigford
169
20k
Optimizing for Happiness
mojombo
365
63k
Git: the NoSQL Database
bkeepers
PRO
415
59k
Statistics for Hackers
jakevdp
781
210k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
39
13k
YesSQL, Process and Tooling at Scale
rocio
157
12k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
119
28k
The Mythical Team-Month
searls
209
39k
Transcript
TypeScriptの型表現 FukuokaJS #8『TypeScript』 / May 15th, 2019 ponday (@ponday_dev)
Profile - ponday (Honda, Yusuke) - 株式会社ベガコーポレーション - 最近の仕事はUIデザイン(自分でもびっくり) -
副業もやってます
TypeScript = JavaScript + 型
型が書けるだけ?
TypeScriptの型 - JavaScriptは動的型付け - 静的型付けの仕組みだけだと表現力不足 - 条件によって型が変動するなど - TypeScriptの表現力が追いつかないとき =
any - 最近なら unknown型 を使ったほうが良い
型よくわかんないから とりあえずany で!
(屮゚Д゚)屮 ⌒┻━┻
any 型 - あらゆる型と互換性がある特殊な型 - どんな型からでも変換できる - どんな型にも変換できる - 正しく動作するかは気にしない
- TypeScriptの型システムを無視してしまう
any 型の問題点 - 型検査ができない - 意図しない型が代入されても検知できない - 存在しないプロパティにアクセスしても検知できない - 型検査で予防できるはずのエラーが実行時エラーに
- 補完が効かない - 型推論ができないことによる副作用
anyを使う ≒ TypeScriptの恩恵を捨てる
基本的に anyは使わないほうが良い
とはいえ
TypeScriptの表現力が足りないときは any だった
型の表現力を高める仕組み が追加
Static types for dynamically named properties - バージョン2.1で追加 - keyof
キーワードと T[K] という記法からなる - keyof Tは型Tのプロパティを列挙する - T[K]は型TのプロパティKの型を示す
None
この関数の型は?
こう書ける
None
Mapped Types - バージョン2.1で追加 - ある型が持つプロパティを走査して新しい型を作る - keyofやT[K]などと組み合わせて使うことが多い
None
Conditional Types - バージョン2.8で追加 - 型を条件分岐で変化させる - 三項演算子の記法と同じ
None
これらを組み合わせると 定義できる型の幅はすごく広がる
ただ
わかりづらくない?
TypeScriptの組み込み型関数 - 汎用的なイディオムをまとめた型関数 - 内部でConditional Typesなどを活用 - よく使うものはわりと揃っている印象 - これを使うだけでもある程度表現力が広がる
Partial<T> 型TのプロパティをNullableにする
Required<T> 型TのプロパティをNonNullableにする(Partialの逆)
Readonly<T> 型Tのプロパティに readonly を付与する
Pick<T, K extends keyof T> 型TからプロパティKを抜き出す
Exclude<T, U> 型Uに代入可能な型Tを除去する
Extract<T, U> 型Uに代入可能な型Tのみを取り出す(Excludeの逆)
Extract<T, U> 型Uに代入可能な型Tのみを取り出す(Excludeの逆)
Parameters<T extends (...args: any[]) => any> 関数の引数の型を返す
ReturnType<T extends (...args: any[]) => any> 関数の戻り値の型を返す
他にもいろいろ - NonNullable<T> - ConstructorParameters<T extends new (...args: any[]) =>
any> - InstanceType<T extends new (...args:any[]) => any> - ThisType<T> - Record<K extends keyof any, T>
まとめ - anyはTypeScriptの型システムを無視してしまう - 基本的にanyは使わないほうが良い - TypeScriptの表現力もかなり向上している - anyに頼らざるを得ない場面も減ってきた -
anyを使うより先にunknownを検討すべき - 組み込み型だけでも表現できる幅は結構広がる