TypeScriptのUtilityTypesと使い方

こんにちは。エンジニアのujitaです。

弊社の「MediaDX」というサービスでは独自のCMSであるOpen Media Suite（以下OMS）を提供しています。 OMSのフロントエンドはTypeScriptを使用して開発しています。

開発を続けていくと、似たような型定義が増えていくことがあると思います。 そのような場合にTypeScriptが提供しているUtilityTypesを利用すると、既存の型から別の型に変換することができます。 今回はOMSで使っているUtilityTypesと使い方についてご紹介します。

Record <Keys, Type>

まずはRecordです。Record型はKeysをプロパティキー、Typeをプロパティの値としたオブジェクト型を生成します。

使用例

interface DataType {
  dataSource: any[] | { [key: string]: any }
  id: number;
  name: string;
}

let Data: DataType = 
  {
    dataSource: {
      id: 1
    },
    id: 1,
    name: "ujita"
  }

let test1 = Data.dataSource
// test1の型はany[] | { [key: string]: any }

test1 = { id: 'tokyo' }
// OK

let test2 = Data.dataSource as Record<string, number>
// test2の型はRecord<string, number>

test2 = { id: 100 }
// OK

test2 = { id: 'tokyo' }
// ERROR
// Type 'string' is not assignable to type 'number'

使用例のように型アサーションと組み合わせて、型推論を上書きする際にも利用できます。 interfaceで定義したときよりも正確に型定義することができていると思います。

Pick <Type, Keys>

次にPickです。Pick型はTypeの型からKeysに指定したプロパティーだけを含むオブジェクト型を生成します。

使用例

interface Tag {
  id: number
  name: string
  description: string
}

type pickedTag = Pick<Tag, 'id' | 'name'>
// {
//   id: number
//   name: string
// }

TagsTest(tags: pickedTag[]) {
    const convertTags = tags.map(tag => tag.id)
}

上記のtagsの型は以下のようになります。

[
  {
    id: number,
    name: string
  }
]

まとめ

今回、紹介したのはRecordとPickだけですが一度定義した型を上手く使って新しい型をスマートに生成することができていると思います。 また使用例にあるように、始めに定義した型よりも厳格な型を生成する使い方もできます。 UtilityTypesを使ってより開発効率と安全性を高めていきたいと思います。