[Typescript] key, value 로 pair로 타입 활용하기

회사 일 & 사이드 프로젝트에서 항상 사용하게 되는 패턴이 있어서 간단하게 정리 해보고자 한다.

타입스크립트에서 종종 키, 밸류 페어로 타입을 관리해야할 때가 있는데

예를들어서 이벤트를 로깅한다고 가정하면

type Events = {
  simpleEvent: undefined;
  clickBannerEvent: { id: number };
  clickCard: { title: string; description: string; };
}

이런식으로 특정 키값에 대해서 매핑 되는 타입이 있다고 가정할 때

const handleClick = (name: string, data: any) => {
  console.log(name, data);
};

이때 name 과 data 가 각각 위의 테이블에서 매핑된 타입에 맞게 강제시 하는 방법이다.

이 방법은 React Navigation v6 에서 아이디어를 얻었는데,

navigation.navigate('UserInfoScreen', { userId: 123 });

이런식으로 screenName 에 매핑되는 screenParam 에 대한 타입 도움을 얻을 수 있었고 내부 패키지 까봐서 어떻게 동작하는지 파악해서 대충 따라 해본 결과

const handleClick = <T extends keyof Events>(name: T, data: Events[T]) => {
  console.log(name, data);
};

이런식으로 쓰고 있다. 이때 예를들어 data 가 undefined 인 경우에 명시적으로

handleClick('simpleEvent', undefined);

라고 입력하기 귀찮을때가 있는데 (argument 에 기본적으로 값이 없으면 undefined 이기 때문에) 이럴땐

const handleClick = <T extends keyof Events>(
  ...[name, data]: undefined extends Events[T] ? [T] : [T, Events[T]]
) => {
  console.log(name, data);
};

이렇게 해볼 수 있다.

끝