Javascript 조건부 내부 유형 스크립트 인터페이스

Javascript 조건부 내부 유형 스크립트 인터페이스

TypeScript에서 인터페이스 선언 내부의 조건을 가질 수 있습니까?제가 찾고 있는 것은 첫 번째 키의 값을 기준으로 두 번째 키가 이러한 값이 될 수 있다는 것입니다.

예(비작동):

interface getSublistValue {

    /** The internal ID of the sublist. */
    sublistId: 'item' | 'partners';

    /** The internal ID of a sublist field. */
    if (this.sublistId === 'item') {
        fieldId: 'itemname' | 'quantity';
    }

    if (this.sublistId === 'partners') {
        fieldId: 'partnername' | 'location';
    }
}

아니, 거기에는 아니야.가장 좋은 방법은 두 가지 유형의 데이터를 설명하는 별도의 인터페이스를 만드는 것입니다.

예:

interface SublistItem {
    sublistId: 'item';
    fieldId: 'itemname' | 'quantity';
}

interface SublistPartners {
    sublistId: 'partners';
    fieldId: 'partnername' | 'location';
}

function getData(): SublistItem | SublistPartners {
    return (Math.random() < 0.5)
        ? { sublistId: 'item', fieldId: 'itemname' }
        : { sublistId: 'partners', fieldId: 'partnername' };
}

const someValue = getData();

if (someValue.sublistId === "item") {
    // SublistItem in here
}
else {
    // SublistPartners in here
}

인터페이스를 완전히 분리하려면 다음과 같은 작업을 수행할 수 있습니다.

예: sublist.model.ts

interface SublistItem {
    sublistId: 'item';
    fieldId: 'itemname' | 'quantity';
}

interface SublistPartners {
    sublistId: 'partners';
    fieldId: 'partnername' | 'location';
}

export type Sublist = SublistItem | SublistPartners;

이제 Sublist 유형을 사용할 수 있습니다. 그러면 Sublist Partners 유형인지 Sublist 유형인지 정확하게 추론할 수 있습니다.입력한 필드 값에 따라 항목을 지정합니다.

조건부 유형을 사용하여 이 문제를 해결할 수 있습니다.

interface SublistItem {
    sublistId: 'item';
    fieldId: 'itemname' | 'quantity';
}

interface SublistPartners {
    sublistId: 'partners';
    fieldId: 'partnername' | 'location';
}

type ConditionalSublist<bIsSublistItem=true> = bIsSublistItem extends true ? SublistItem : SublistPartners;

let sublistItem: ConditionalSublist<true> = {
    fieldId: "itemname",
    sublistId: "item"
};

let sublistPartner: ConditionalSublist<false> = {
    fieldId: "partnername",
    sublistId: "partners"
};

당신은 제 예를 들 수 있습니다.필요한 소품을 제공한 후, 타자기는 다른 소품을 제안할 것입니다.

interface _ButtonProps {
  variant: 'flat' | 'primary';
}

interface FlatButton extends _ButtonProps {
  variant: 'flat';
  textColor?: string;
}

interface PrimaryButton extends _ButtonProps {
  variant: 'primary';
  backgroundColor?: string;
}

export type ButtonProps = FlatButton | PrimaryButton;

언급URL : https://stackoverflow.com/questions/44211804/javascript-conditional-inside-typescript-interface