typescript - 根据 TypeScript 中的另一个属性值动态解析属性类型

Question

我有以下 TypeScript 接口(interface):

interface SelectProps {
    options: Option[];
    value: string[];
    onChange: (value: string[]) => void;
}

我想添加名为 isMultiple 的 bool 值，它将更改其他属性的类型。

当 isMultiple=true

• 执行 value:string[]
• 强制 onChange: (value: string[]) => void;

当 isMultiple=false

• 执行 value:string
• 强制 onChange: (value: string) => void;

是否可以根据一个属性的值动态设置其他属性的类型？

Answer 1

有点晚了，但我希望它能像帮助我一样帮助其他人。

区分联合，也称为标记联合或代数数据类型可用于解决此问题。

interface MultipleSelectProps {
    isMultiple: true;
    options: string[];
    value: string[];
    onChange: (value: string[]) => void;
}

interface SingleSelectProps {
    isMultiple: false;
    options: string[];
    value: string;
    onChange: (value: string) => void;
}

type SelectProps = MultipleSelectProps | SingleSelectProps;

使用示例:

function Select(props: SelectProps) {
    if (props.isMultiple) {
        const { value, onChange } = props;
        onChange(value);
    } else if (props.isMultiple === false) {
        const { value, onChange } = props;
        onChange(value);
    }
}

Note: When isMultiple is undefined or null it is not possible to infer the specific type of SelectProps. In these cases is necessary to do a strict comparison isMultiple === false.

来源:https://blog.mariusschulz.com/2016/11/03/typescript-2-0-tagged-union-types