Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TypeScriptの型表現
Search
ponday
May 15, 2019
Programming
10
3k
TypeScriptの型表現
FukuokaJS #8 『TypeScript』(2019.05.15)の発表資料です。
ponday
May 15, 2019
Tweet
Share
More Decks by ponday
See All by ponday
関数型でGoFのデザインパターンやってみる
honda
1
1.1k
Web Componentsの今
honda
1
390
これまでのReact、これからのReact
honda
0
290
Gatsbyお試し
honda
0
110
styled-components or emotion?
honda
0
640
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
630
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
740
Web Componentsの動向とPolymer
honda
4
2.4k
Other Decks in Programming
See All in Programming
CSC305 Lecture 26
javiergs
PRO
0
140
短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go
n3xem
2
170
快速入門可觀測性
blueswen
0
380
create_tableをしただけなのに〜囚われのuuid編〜
daisukeshinoku
0
270
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
140
Mermaid x AST x 生成AI = コードとドキュメントの完全同期への道
shibuyamizuho
0
160
ドメインイベント増えすぎ問題
h0r15h0
2
360
テストコード書いてみませんか?
onopon
2
140
開発者とQAの越境で自動テストが増える開発プロセスを実現する
92thunder
1
190
PHPとAPI Platformで作る本格的なWeb APIアプリケーション(入門編) / phpcon 2024 Intro to API Platform
ttskch
0
270
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
530
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
2
1k
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
520
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
450
Visualization
eitanlees
146
15k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
Done Done
chrislema
181
16k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Six Lessons from altMBA
skipperchong
27
3.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
A better future with KSS
kneath
238
17k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
66k
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を検討すべき - 組み込み型だけでも表現できる幅は結構広がる