다른 속성에 따라 선택적 속성 유형 스크립트 인터페이스

다른 속성에 따라 선택적 속성 유형 스크립트 인터페이스

다음 유형 스크립트가 있다고 가정해 보겠습니다.

interface Sample {
    key1: boolean;
    key2?: string;
    key3?: number;
};

이 경우, 는 항상 필수이고 는 항상 선택 사항이며, 키 3은 있으면 존재해야 하며 키가 있으면 존재하지 않아야 합니다. 즉, 키의 발생 여부는 다른 키의 값에 따라 달라집니다. Typescript에서 이를 달성하려면 어떻게 해야 합니까?

---

이를 표현하는 가장 간단한 방법은 인터페이스 대신 를 사용하는 것입니다.

type Sample = {
  key1: true,
  key2?: string,
  key3: number
} | {
  key1: false,
  key2?: string,
  key3?: never
}

이 경우 유형 별칭은 설명하는 두 가지 유형 중 하나입니다. 따라서 a는 첫 번째 구성 요소(여기서 참이고 필수) 또는 두 번째 구성 요소(여기서 거짓이고 부재)여야 합니다.

형식 별칭은 인터페이스와 유사하지만 완전히 호환되지는 않습니다. 형식 별칭을 사용하면 오류가 발생하는 경우 질문에 사용 사례에 대한 자세한 내용을 추가하십시오.

그게 도움이 됐으면 좋겠네요. 행운을 빕니다.

---

나는 읽기 쉬운 해결책은 사용하는 것이라고 생각한다.

이렇게 할 수 있습니다.

type IOverload = {
  (param: { arg1: number }): any;
  (param: { arg1: number; arg2: string; arg3: number }): any;
};

const sample: IOverload = (args) => {...};

sample({ arg1: 1, arg2: 'a' });

===> Property 'arg3' is missing in type '{ arg1: number; arg2: string; }' but required 
in type '{ arg1: number; arg2: string; arg3: number; }'.

---

나는 또한 벤 일레그보두()가 하는 방식을 정말 좋아한다:

JSX에서 다음과 같은 세 가지 사례를 제시합니다.

<Text>not truncated</Text>
<Text truncate>truncated</Text>
<Text truncate showExpand>truncated w/ expand option</Text>

... 다음은 프로프가 존재할 때 필요한 속성을 만들기 위한 해당 TypeScript 정의입니다.

interface CommonProps {
  children: React.ReactNode

  // ...other props that always exist
}

type TruncateProps =
  | { truncate?: false; showExpanded?: never }
  | { truncate: true; showExpanded?: boolean }

type Props = CommonProps & TruncateProps

const Text = ({ children, showExpanded, truncate }: Props) => {
  // Both truncate & showExpanded will be of
  // the type `boolean | undefined`
}```