[react/typescript] FC의 Props type을 조건부(conditionally) 필수(required) 처리 하는 샘플코드

react로 select box를 구현하던 중 작성한 코드

type SELECT_기본선택지 = '선택' | '전체';

type Props = {
  data: any[]; // select box를 구성할 리스트 데이터
  labelKeyName?: string; // 리스트(=data)의 요소에서 특정 프로퍼티를 option의 label로 사용하고 싶을 경우 기재
  valueKeyName?: string; // 리스트(=data)의 요소에서 특정 프로퍼티를 option의 value로 사용하고 싶을 경우 기재
  style?: CSSProperties;
} & (
  | {
      // form(react-hook-form)을 사용하는 경우 - form, fieldName props만 사용
      form: UseFormReturn<any>;
      fieldName: string; // form field name
      setState?: never;
    }
  | {
      // form을 사용하지 않고, 페이지 내에 state(select box에서 선택된 요소)를 정의하여 사용하는 경우, state의 setter 전달 - setState props만 사용
      form?: never;
      fieldName?: never;
      setState: Dispatch<SetStateAction<any>>;
    }
) &
  (
    | {
        // 기 정의된 기본값을 사용하는 경우
        defaultSelectorType: SELECT_기본선택지; // 기본 value는 빈문자 '' 임
        defaultLabel?: never;
      }
    | {
        // 사용자정의 기본값을 사용할 경우
        defaultSelectorType?: never;
        defaultLabel: string; // '전체', '선택' 대신 기본 선택 라벨로 할 값. (참고: 라벨에 관계없이 기본 value는 빈문자 '' 임.)
      }
  );