TypeScript :: 객체 타입에서 다른 속성 기반한 필수 속성

TypeScript에서 기억하고 싶은 내용

 

 

호기심의 시작

interface를 이용해서 리액트 컴포넌트 프로퍼티의 타입을 정해주고 있다,

A 속성의 값에 따라, B와 C의 타입을 필수로 만들 수 있을까?

예를 들면, 여기서 isFruit 속성이 true일 때, sweetness와 hasSkin을 필수로 만들 수 있을까?

 

 

접근 방법

1. 우선 isFruit이 false인 경우

sweetness와 hasSkin은 타입을 받지 않는다

interface Props {
  isFruit: false;
  sweetness?: never;
  hasSkin?: never;
}

 

2. isFruit이 true인 경우

sweetness와 hasSkin의 타입을 정해준다

interface FruitProps {
  isFruit: true;
  sweetness: number;
  hasSkin: boolean;
}

 

3. 조건에 따라 타입 고르기

type ConditionalProps = Props | FruitProps;

 

4. 컴포넌트에 적용

export default function Component({
  isFruit,
  sweetness,
  hasSkin,
}: ConditionalProps) {
  return <></>
}

 

5. 사용 결과

isFruit가 true지만, sweetness와 hasSkin이 없는 경우 그림과 같이 type 에러가 나온다

 

 

다른 멋진 방법

있으면 공유해주시면 감사드리겠습니다