typescript Extract로 Union에서 특정 타입 추출하기

타입스크립트에서 Union으로 묶어놓은 타입 중 특정 타입을 골라서 사용하고 싶어서 찾아보았다

Union에서 특정 타입 추출하기

type Add = {
  type: 'add';
  id: string;
  value: string;
};

type Remove = {
  type: 'remove';
  id: string;
};

type Multiply = {
  type: 'multiply';
  id: string;
  value: number;
};

type Action = Add | Remove | Multiply;

export type ExtractOneFromAction<T extends Action> = Extract<T, { type: T['type'] }>;

const add: ExtractOneFromAction<Add> = {
  type: 'add',
  id: '1',
  value: '2',
};

Extract type 이란?

• Extract<Type, Union>
  • Union에 할당할 수 있는 모든 공용체 멤버를 Type에서 추출하여 유형을 생성합니다.

type T0 = Extract<"a" | "b" | "c", "a" | "f">;   
// type T0 = "a"

type T1 = Extract<string | number | (() => void), Function>;
// type T1 = () => void

참고

• https://stackoverflow.com/questions/64527150/in-typescript-how-to-select-a-type-from-a-union-using-a-literal-type-property
• https://www.typescriptlang.org/docs/handbook/utility-types.html#extracttype-union
• https://github.com/TaehwanGo/react-playground/commit/36e770b29a4f98e509314900d26758b63af2d013