조건부 타입 정의하기

• 개인 프로젝트 개발 중 하나의 상위 컴포넌트에서 여러 타입의 모달을 관리하는 매니저 컴포넌트를 개발하게 되었다.
• 다만 하나의 컴포넌트에서 서로 다른 타입의 모달을 관리 하려다보니, 타입 또한 조건부로 설정 할 수 있을까? 하는 궁금증에 필요를 느껴 찾아보게 되었다.

간단하게 정리하자면...

1. 베이스로 사용할 타입을 지정하고, 조건이 될 타입을 작성한다.
2. 조건이 될 타입이 베이스 타입을 상속받는다.
3. 조건부로 추가될 타입이 1, 2의 과정을 거친 타입을 상속받는다.

정리

type 조건부 타입 =  
	베이스 타입 & 조건1 타입 & 조건부로 추가될 타입 |
	베이스 타입 & 조건2 타입 & 조건부로 추가될 타입 |
	베이스 타입 & 조건3 타입 & 조건부로 추가될 타입

예시

import { ReactNode } from 'react';

export type ModalBaseType = {
    type: 'dialog' | 'bottomSheet' | 'toast';
    id: string;
    content: ((modalId: string) => ReactNode) | string;
};

export type ModalButtonType = {
    type: 'close' | undefined;
    content: string | ReactNode;
    backgroundColor?: string;
    textColor?: string;
};

export type ModalType =
    | (ModalBaseType & { type: 'dialog' } & { buttons?: ModalButtonType[] })
    | (ModalBaseType & { type: 'bottomSheet' } & { buttons?: ModalButtonType[] })
    | (ModalBaseType & { type: 'toast' } & { duration?: number });

---

• https://www.typescriptlang.org/docs/handbook/2/conditional-types.html