LoginSignup
5
6

More than 5 years have passed since last update.

TypeScriptのutility typeすぐに使えそうなやつから解説してみる

Last updated at Posted at 2019-04-26

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が大きくなり始めるとドキュメントとの照らし合わせが大変な時もあります。
このユーティリティを使ってクリーンに無駄なドキュメントレスな開発ができるといいなと思いました。

5
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
6