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

Question

我有以下TypeScript接口:

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

我想添加一个boolean isMultiple,它将改变其他属性的类型.

什么时候 isMultiple=true

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

什么时候 isMultiple=false

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

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

Answer 1

更新

实际上它可以更容易完成，这里所需要的只是使用像这样的联合类型：

type SelectProps = {
      isMultiple: true;
      options: string[];
      value: string[];
      onChange: (value: string[]) => void;
    } : {
      isMultiple: false;
      options: string[];
      value: string;
      onChange: (value: string) => void;
    }

您可以使用 typescript 分布式条件类型 https://www.typescriptlang.org/docs/handbook/2/conditional-types.html

所以你的类型将如下所示：

type SelectProps<TMultiple = boolean> = TMultiple extends true
  ? {
      isMultiple: TMultiple;
      options: string[];
      value: string[];
      onChange: (value: string[]) => void;
    }
  : {
      isMultiple: TMultiple;
      options: string[];
      value: string;
      onChange: (value: string) => void;
    };

这是一个简单的示例：https://stackblitz.com/edit/typescript-9jgvys

Answer 2

这有点晚了,但我希望它能帮助其他人帮助我.

可以使用被区分的联合(也称为标记联合或代数数据类型)来解决此问题.

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 { id, onChange } = props;
        onChange(id);
    } else if (props.isMultiple === false) {
        const { id, onChange } = props;
        onChange(id);
    }
}

注意:isMultiple是undefined或null不是可以推断的具体类型SelectProps.在这些情况下有必要进行严格的比较isMultiple === false.

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