我有以下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;
是否可以根据一个属性的值动态设置其他属性的类型?
这有点晚了,但我希望它能帮助其他人帮助我.
可以使用被区分的联合(也称为标记联合或代数数据类型)来解决此问题.
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