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
400
これまでのReact、これからのReact
honda
0
290
Gatsbyお試し
honda
0
110
styled-components or emotion?
honda
0
660
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
660
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
770
Web Componentsの動向とPolymer
honda
4
2.4k
Other Decks in Programming
See All in Programming
Ça bouge du côté des animations CSS !
goetter
2
150
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
990
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
0
160
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
250
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
1k
Introduction to kotlinx.rpc
arawn
0
770
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
260
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
350
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
310
Jakarta EE meets AI
ivargrimstad
0
420
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
150
GoとPHPのインターフェイスの違い
shimabox
2
210
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
990
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Practical Orchestrator
shlominoach
186
10k
Mobile First: as difficult as doing things right
swwweet
223
9.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Side Projects
sachag
452
42k
Gamification - CAS2011
davidbonilla
80
5.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
Build your cross-platform service in a week with App Engine
jlugia
229
18k
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を検討すべき - 組み込み型だけでも表現できる幅は結構広がる