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.3k
Web Componentsの今
honda
1
430
これまでのReact、これからのReact
honda
0
320
Gatsbyお試し
honda
0
120
styled-components or emotion?
honda
0
690
Web ComponentsとAngular
honda
0
130
Atomic Design周りについての私見
honda
1
720
え、まだWeb Componentsを未来の技術だと思ってるの?
honda
2
840
Web Componentsの動向とPolymer
honda
4
2.6k
Other Decks in Programming
See All in Programming
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
200
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
340
技術的負債の正体を知って向き合う
irof
0
210
iOSでSVG画像を扱う
kishikawakatsumi
0
150
SODA - FACT BOOK(JP)
sodainc
1
8.6k
CSC509 Lecture 08
javiergs
PRO
0
230
Six and a half ridiculous things to do with Quarkus
hollycummins
0
200
Developer Joy - The New Paradigm
hollycummins
1
310
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
520
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
Flutterで分数(Fraction)を表示する方法
koukimiura
0
140
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.4k
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Statistics for Hackers
jakevdp
799
220k
Documentation Writing (for coders)
carmenintech
75
5.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Designing Experiences People Love
moore
142
24k
Embracing the Ebb and Flow
colly
88
4.9k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
GraphQLとの向き合い方2022年版
quramy
49
14k
Building Applications with DynamoDB
mza
96
6.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
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を検討すべき - 組み込み型だけでも表現できる幅は結構広がる