📌

TypeScriptでオブジェクトの型からキーのみを取り出してユニオン型を作るときの落とし穴

2024/10/20に公開

はじめに

最近知りました。

結論

オブジェクト型A、オブジェクト型Bのユニオン型からなる型Cに対してkeyofを設定すると

AとB共通でもつkeyのみのユニオン型が返される。

やりたいなら type C = (keyof A) | (keyof B)

経緯

TypeScriptにおいてオブジェクトの型からキーのみの型を取り出したいとする。

https://typescriptbook.jp/tips/generates-type-from-object-key

例えばこういう型があったとする。

export type UserBase = {
  id: number;
  name: string;
  role: "student" | "mentor";
  email: string;
  age: number;
  postCode: string;
  phone: string;
  hobbies: string[];
  url: string;
};

export type Student = UserBase & {
  studyMinutes: number;
  taskCode: number;
  studyLangs: string[];
  score: number;
  availableMentors?: string[];
};

export type Mentor = UserBase & {
  experienceDays: number;
  useLangs: string[];
  availableStartCode: number;
  availableEndCode: number;
  availableStudents?: string[];
};

export type User = Student | Mentor;

このような型の時にUserというオブジェクト型のキー名全部を取り出したいとき。

欲しいのは

type HOGE = "id" | "name" | ・・・

みたいな。

これを取得するために

export type UserKey = keyof User

としたらそれはアウトです。

結論で言ったことが起こります。

この場合ならUserKeyに入るのは BaseUserの型が持っているkey。

だからもしやりたいなら

type hoge = keyof Student | keyof Mentor;

終わりに

何度も言います。

初めて知りました。

Discussion