React+TypeScript如何根据可选布尔prop isMulti限定onSelected回调类型

错误原因 #

你当前的泛型接口仅能约束组件外部调用时的传参类型，但是组件内部实现时，TypeScript 无法建立isMulti取值和onSelected类型的关联映射，调用onSelected时无法确定参数类型，就会要求参数同时满足两种入参要求，也就是报错信息里的string & string[]，自然会类型不兼容。

推荐解法：使用判别联合类型定义Props #

把Props定义为两种互斥场景的联合类型，TypeScript 可以通过isMulti的取值自动缩小对应分支的onSelected类型：

type ISelectorProps = 
  // isMulti为true的场景
  | {
      isMulti: true;
      onSelected: (options: string[]) => void;
    }
  // isMulti为false或者不传的场景
  | {
      isMulti?: false | undefined;
      onSelected: (option: string) => void;
    }

组件内部使用示例：

const Selector = (props: ISelectorProps) => {
  if (props.isMulti) {
    // 此分支下onSelected自动识别为数组入参的回调类型
    props.onSelected(['选项A', '选项B']);
  } else {
    // 此分支下onSelected自动识别为单个字符串入参的回调类型
    props.onSelected('选项A');
  }
}

该写法同时保证组件调用时的类型校验：

• 传入isMulti={true}时，onSelected回调的入参必须为字符串数组
• 不传isMulti或传入isMulti={false}时，onSelected回调的入参必须为单个字符串

备选解法：类型断言（不推荐） #

如果你要保留原有泛型写法，可以在调用onSelected时手动指定类型，绕开自动类型推导：

// 确定isMulti为true时的调用写法
(props.onSelected as (options: string[]) => void)(['选项A', '选项B']);

内容的提问来源于stack exchange，提问作者stackoverflow