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
2.9k
TypeScriptの型表現
FukuokaJS #8 『TypeScript』(2019.05.15)の発表資料です。
ponday
May 15, 2019
Tweet
Share
More Decks by ponday
See All by ponday
関数型でGoFのデザインパターンやってみる
honda
0
1k
Web Componentsの今
honda
1
370
これまでのReact、これからのReact
honda
0
260
Gatsbyお試し
honda
0
110
styled-components or emotion?
honda
0
620
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
580
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
720
Web Componentsの動向とPolymer
honda
4
2.3k
Other Decks in Programming
See All in Programming
Async Await: Mastering Python's Time-Bending Tricks - EuroPython2024
yanbo
1
350
AWS初心者ってどうやってAWSを学ぶ?〜アプリエンジニアがやってよかったアーキテクチャ学習方法〜
yamanashi_ren01
0
320
500万人が利用する「友達と遊べるたまり場アプリ パラレル」におけるデータベース基盤の継続的改善
yoheimuta
5
3.6k
Compose Web 개발하기
pangmoo
0
110
Terraformテスト入門
msato
1
1k
SLO導入と Datadog SLO Dashboard / SLO introduction and Datadog SLO Dashboard
honyanya
0
110
レビューに向けて工夫した話
wataruan
0
190
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
5
1.4k
VueUse: 5分で分かる Vue.js 開発の効率化術
naokihaba
4
1.7k
食べログのモジュラモノリス化戦略
weakboson
8
2.6k
Material Motion for Compose
fornewid
0
130
Kaggleの歩き方-関西Kaggler会に参加してみて-
wakamatsu_takumu
2
260
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
201
19k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Optimising Largest Contentful Paint
csswizardry
25
2.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
22
1.5k
Designing for Performance
lara
604
68k
Building an army of robots
kneath
301
42k
A Tale of Four Properties
chriscoyier
155
22k
StorybookのUI Testing Handbookを読んだ
zakiyama
21
5k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Building Your Own Lightsaber
phodgson
101
5.9k
The Brand Is Dead. Long Live the Brand.
mthomps
52
37k
Infographics Made Easy
chrislema
239
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を検討すべき - 組み込み型だけでも表現できる幅は結構広がる