如果缺少 prop，React Typescript 会区分类型

Question

我正在尝试创建一个带有可清除属性的选择，该属性允许单击可清除按钮，单击该按钮时会调用 onChange 处理程序，并将 null 作为值。当 clearable 设置为 true 时，我希望将 onChange 处理程序键入为 T |空=> void ，当它设置为 false 时，我希望将其输入为 T =>;无效。这部分不是问题，当我希望 clearable 的默认值为 true 时，问题就出现了，这允许用户在不指定 的情况下调用选择组件clearable 属性并输入 onChange，就好像 clearable 为 true。请参阅下面的代码，并让我知道如何在未设置 clearable 时键入 SelectProps 来正确设置 onChange。

type SelectProps<T> = {
  options: T[];
  value: T;
} & (
  | {
      clearable: false;
      onChange: (val: T) => void;
    }
  | {
      clearable?: true;
      onChange: (val: T | null) => void;
    }
);

const Select = <T extends string>({
  options = [],
  value,
  clearable = true,
  onChange,
}: SelectProps<T>): React.ReactElement<SelectProps<T>> => <div>select</div>;

class App extends React.Component {
  render() {
    return (
      <>
        {/*Works, onChange val is typed to string */}
        <Select
          clearable={false}
          options={[]}
          value=""
          onChange={(val) => console.log(val)}
        />

        {/*Works, onChange val is typed to string OR null */}
        <Select
          clearable={true}
          options={[]}
          value=""
          onChange={(val) => console.log(val)}
        />

        {/* Doesn't Work, onChange val is typed to any */}
        <Select options={[]} value="" onChange={(val) => console.log(val)} />
      </>
    );
  }
}

请注意，以下操作均无效：

{
  clearable: false;
  onChange: (val: T) => void;
} | {
  clearable: true | undefined;
  onChange: (val: T | null) => void;
}

// Or using a separated "undefined" case...
{
  clearable: false;
  onChange: (val: T) => void;
} | {
  clearable: true;
  onChange: (val: T | null) => void;
} | {
  clearable: undefined;
  onChange: (val: T | null) => void;
}


// Or defining a case without the "clearable" prop
{
  clearable: false;
  onChange: (val: T) => void;
} | {
  clearable: true;
  onChange: (val: T | null) => void;
} | {
  onChange: (val: T | null) => void;
}