Web Dev/TypeScript :: 타입스크립트
TypeScript :: 객체 타입에서 다른 속성 기반한 필수 속성
HJPlumtree
2023. 2. 19. 19:34
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 에러가 나온다

다른 멋진 방법
있으면 공유해주시면 감사드리겠습니다