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
3.1k
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.2k
Web Componentsの今
honda
1
430
これまでのReact、これからのReact
honda
0
310
Gatsbyお試し
honda
0
120
styled-components or emotion?
honda
0
690
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
700
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
830
Web Componentsの動向とPolymer
honda
4
2.6k
Other Decks in Programming
See All in Programming
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
4
2.1k
decksh - a little language for decks
ajstarks
4
21k
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
510
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
310
Jakarta EE Meets AI
ivargrimstad
0
510
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.2k
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
210
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
5
680
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
230
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
140
JetBrainsのAI機能の紹介 #jjug
yusuke
0
160
Featured
See All Featured
Embracing the Ebb and Flow
colly
86
4.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
We Have a Design System, Now What?
morganepeng
53
7.7k
How STYLIGHT went responsive
nonsquared
100
5.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Code Review Best Practice
trishagee
69
19k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
How to Ace a Technical Interview
jacobian
278
23k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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を検討すべき - 組み込み型だけでも表現できる幅は結構広がる