【TIPS】TypeScriptで便利な型を自作する

2022年8月14日

TypeScriptでちょっとしたときに使う・使った型定義をまとめていきます。（随時更新）

オブジェクトの値を型として定義する

型定義

export type RecursiveValueOf<T extends object> = {
  [K in keyof T]: T[K] extends unknown[]
    ? T[K]
    : T[K] extends object
    ? RecursiveValueOf<T[K]>
    : T[K]
}[keyof T]

使用方法

以下のようにオブジェクトの値を再帰的に抽出してひとつの型として定義できます。

export const path = {
  home: '/',
  user: {
    index: '/user/',
    news: '/user/news',
  },
  login: '/login',
  signup: '/signup',
} as const

export type Path = RecursiveValueOf<typeof path>
// => "/login" | "/user/news" | "/user/" | "/signup" | "/" と定義される

一部のみ必須化してPick or Omitする

型定義

export type PickPartialWithID<T, K extends keyof T, ID extends keyof T> = Pick<
  Partial<T>,
  K
> & {
  [P in ID]: T[P]
}

export type OmitPartialWithID<T, K extends keyof T, ID extends keyof T> = Omit<
  Partial<T>,
  K
> & {
  [P in ID]: T[P]
}

使用方法

type User = {
  id: string
  email: string
  password: string
  name: string
  age: number
}

type UserCreateRequest = OmitPartialWithID<User, 'id', 'email' | 'password'>
// => { email: string, password: string, name?: string, age?: number } と同義

type UserUpdateRequest = PickPartialWithID<User, 'name' | 'age', 'id'>
// => { id: string, name?: string, age?: number } と同義