TypeScriptのutility-Type把握する
TypeScriptのutility-Typeとは
TypeScriptが提供する型の変換を加えるのをアシストするラッパーです。
型システムがリッチになるのはとても嬉しい。(ずっと静的型付け言語ばかりやってきたので)
大きなプロジェクトになればなるほどこう言った型システムをはじめとする
多人数開発に向いている機能の価値が高まると思っています。
型システム使いこなしていこ!ってことで早速いってみよう。
公式はこちら
https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/Utility%20Types.md#recordkt
utility-Type一覧
- Partial<T>
- Readonly<T>
- Record<K,T>
- Pick<T,K>
- Exclude<T,U>
- Extract<T,U>
- NonNullable<T>
- ReturnType<T>
- InstanceType<T>
- Required<T>
- ThisType<T>
個人的に使いたいもの
ここからは個人的に使い所がパッと思いついたものをサンプルとともに紹介します。
Readonly
こいつでラップするとプロパティの値が変更できなくすることができます。
文字通り"読むだけ"です。
interface user {
id:number
name: string,
age: number,
adress: string,
}
const user:Readonly<user> = {
id: 1,
name: 'takao-h',
age: 24,
adress: '東京都渋谷区桜丘町20-1'
}
user.name = 'hogehoge' //Error: cannot reassign a readonly property
Pick
Pickは任意にプロパティのみにアクセスできるようにしてくれる。
interface user {
id:number
name: string,
age: number,
adress: string,
}
type userName = Pick<user, 'name' | 'age'>
const userGroup : userName = {
name: 'takao-h',
age: 24
}
Recod
2つめの引数の型をもち1つめの引数にとったプロパティをもつ一連のデータを作ることができます。
このユーティリティは任意の型のプロパティを別の型にマップするために使用できます。
interface user {
langage: string
}
type goodAt = 'ES6' | 'Scala' | 'MySql'
const x: Record<user, goodAtlang> = {
forntend:{langage: 'ES6'},
backend:{langage: 'Scala'},
DB:{langage: 'MySql'}
}
Required
このユーティリティは定義したものを必ず入れるように強制します。
interface user {
id:number
name: string,
age: number,
adress: string,
}
cons obj: user = {id: 1} //OK
const obj2: Required<user> = {id: 1} //Error : property 'name', 'age', 'adress' missing
まとめ
- 今回は本当に一部しか触れませんでしたが便利な型システムがたくさんあるので調べてみてください。
- 実際にプロダクションで使えそうなものを独断と偏見で選んでいます。UI層に近いところよりもReduxなどのミドルウエアで効果が絶大な印象でした。
- utility-type最高だな!
実際これはかなりミドルウェアでの振る舞いを意識して選定しました。
大規模開発になってきて、Reduxが大きくなり始めるとドキュメントとの照らし合わせが大変な時もあります。
このユーティリティを使ってクリーンに無駄なドキュメントレスな開発ができるといいなと思いました。