여기에는 Event 라는 구별된 유니온이 있고 그 위에 type 이라는 구분자가 있습니다.

export type Event =
  | {
      type: "click"
      event: MouseEvent
    }
  | {
      type: "focus"
      event: FocusEvent
    }
  | {
      type: "keydown"
      event: KeyboardEvent
    }

Challenge

이 과제의 목표는 "click" 타입을 ClickEvent 라는 새로운 type 으로 추출하는 것입니다.

앞서 살펴본 것처럼 이 작업은 수동으로 수행할 수도 있습니다.

// Don't do this!

type ClickEvent = {
  type: "click"
  event: MouseEvent
}

하지만 대신 구별된 유니온에서 직접 이 타입을 추출해야 합니다. 이렇게 하면 타입을 이중으로 선언할 필요 없이 해당 타입에 대한 one source of truth를 유지할 수 있습니다.

구별된 유니온에서 특정 타입을 추출하는 데 도움이 되는 유틸리티 타입을 찾으려면 TypeScript 문서를 참조하세요.

나의 답

import { Equal, Expect } from '../helpers/type-utils';

export type Event =
  | {
      type: 'click';
      event: MouseEvent;
    }
  | {
      type: 'focus';
      event: FocusEvent;
    }
  | {
      type: 'keydown';
      event: KeyboardEvent;
    };

type ClickEvent = Extract<Event, { type: 'click' }>;

type tests = [Expect<Equal<ClickEvent, { type: 'click'; event: MouseEvent }>>];

유틸리티 타입을 사용하여 유니온에서 추출

여기서 솔루션은 Extract 유틸리티 타입을 사용하여 구별된 유니온에서 click 이벤트를 추출하는 것입니다.

type ClickEvent = Extract<Event, { type: "click" }>