reactjs - TypeScript 没有正确匹配条件类型

Question

我有以下组件(简化版):

type ValueHelper<Clearable extends boolean> = Clearable extends true
    ? string | null
    : string;

type Props<Clearable extends boolean> = {
    clearable?: Clearable;
    onChange: (value: ValueHelper<Clearable>) => void;
    value: ValueHelper<Clearable>;
};

const Input = <Clearable extends boolean = false>({ clearable, value, onChange }: Props<Clearable>) => {
    const handleChange = (event) => {
        const inputValue = event.target.value;
        if (clearable && inputValue === '') {
            onChange(null);
            return;
        }
        onChange(inputValue);
    }

    return (
        <input value={value} onChange={handleChange} />
    );
}

出于某种原因，TypeScript 提示 null参数在 onChange函数，这似乎是错误的，因为我的条件类型 ValueHelper检查是否 clearable是 true ，如果是这样， null应该被允许。

有任何想法吗？

Answer 1

这是 Typescript 的一个限制； typescript 做 control-flow type narrowing在变量上，而不是像您的 Clearable 这样的类型变量上.所以像 if(clearable) 这样的测试可以缩小变量的类型clearable比 Clearable 更具体的东西，但不能缩小Clearable本身是更具体的东西。因此，就 Typescript 而言，就好像您没有执行 if 一样。检查和 Clearable可能仍然是 string而不是 string | null .
在这种情况下，类型断言可能是最简单的解决方案:您知道 null可分配给 ValueHelper<Clearable>在这个分支中，即使 Typescript 不知道，所以代替 null你可以写null as ValueHelper<Clearable> .