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.2k
Web Componentsの今
honda
1
420
これまでのReact、これからのReact
honda
0
310
Gatsbyお試し
honda
0
110
styled-components or emotion?
honda
0
680
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
690
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
810
Web Componentsの動向とPolymer
honda
4
2.5k
Other Decks in Programming
See All in Programming
TSConfigからTypeScriptの世界を覗く
planck16
2
1.3k
rbs-traceを使ってWEARで型生成を試してみた After RubyKaigi 2025〜ZOZO、ファインディ、ピクシブ〜 / tried rbs-trace on WEAR
oyamakei
0
1k
バランスを見極めよう!実装の意味を明示するための型定義 TSKaigi 2025 Day2 (5/24)
whatasoda
2
770
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
philipschwarz
PRO
0
120
AI Coding Agent Enablement in TypeScript
yukukotani
17
7.1k
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
drumath2237
0
110
ts-morph実践:型を利用するcodemodのテクニック
ypresto
1
530
技術的負債と戦略的に戦わざるを得ない場合のオブザーバビリティ活用術 / Leveraging Observability When Strategically Dealing with Technical Debt
yoshiyoshifujii
0
160
SpringBootにおけるオブザーバビリティのなにか
irof
1
880
生成AI時代のフルスタック開発
kenn
10
2.7k
Interface vs Types ~型推論が過多推論~
hirokiomote
1
230
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
5
920
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
BBQ
matthewcrist
88
9.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
840
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Building Adaptive Systems
keathley
41
2.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Site-Speed That Sticks
csswizardry
7
590
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
Practical Orchestrator
shlominoach
188
11k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Rails Girls Zürich Keynote
gr2m
94
13k
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を検討すべき - 組み込み型だけでも表現できる幅は結構広がる