이 연습에서는 이전에 사용했던 것과 동일한 이벤트 구별된 유니온을 사용합니다.

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

여러분의 임무는 구별된 유니온에서 click 또는 focus 또는 keyDown 타입을 가져와 다음 테스트를 통과하는 것입니다.

type tests = [Expect<Equal<EventType, "click" | "focus" | "keydown">>];

지나치게 생가가지 마세요!

이 연습은 생각보다 쉬우며, 문제를 푸는 데 필요한 모든 부분을 이미 설명해 드렸습니다!

나의 답

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

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

type EventType = Event['type'];

type tests = [Expect<Equal<EventType, 'click' | 'focus' | 'keydown'>>];

구별된 유니온의 일부에 액세스하는 데 사용되는 간단한 구문

간단해 보일 수 있지만 해결책은 다음과 같습니다.

type EventType = Event["type"];

유니온 타입의 키에 액세스하면 실제로는 유니온의 모든 가능한 순열에 액세스하는 것이기 때문에 이 기능이 작동합니다.

이벤트 타입으로 실험하기