TypeScript布尔泛型三元运算符报错：如何无类型断言修复？

错误原因 #

泛型参数Multiple属于未实例化的布尔泛型，TypeScript在函数内部无法确定它具体是true还是false，因此无法解析Multiple extends true ? string[] : string这个条件类型的具体分支。即便通过if(multiple)做了运行时判断，TypeScript也不会将这个判断关联到泛型参数的类型收窄上，导致传入的string[]或string无法匹配未解析的条件类型，从而抛出TS2345错误。

修复方案（无需类型断言） #

方案1：使用函数重载 #

直接定义对应两种场景的重载签名，明确不同multiple值对应的onChange参数类型：

// 重载签名：multiple为true时，onChange接收string[]类型参数
function formField(multiple: true, onChange: (newValue: string[]) => void): void;
// 重载签名：multiple为false时，onChange接收string类型参数
function formField(multiple: false, onChange: (newValue: string) => void): void;
// 通用实现
function formField(multiple: boolean, onChange: (newValue: string[] | string) => void) {
  if (multiple) {
    onChange(["Hello, World!"]);
  } else {
    onChange("Hello, World!");
  }
}

外部调用时，TypeScript会根据传入的multiple值自动推断onChange的参数类型，内部实现因参数为联合类型，两种传入值都合法。

方案2：利用分布式条件类型与元组参数 #

将参数封装为条件元组，让TypeScript能通过元组类型收窄识别分支逻辑：

function formField<Multiple extends boolean>(
  ...args: Multiple extends true 
    ? [multiple: true, onChange: (newValue: string[]) => void]
    : [multiple: false, onChange: (newValue: string) => void]
) {
  const [multiple, onChange] = args;
  if (multiple) {
    onChange(["Hello, World!"]);
  } else {
    onChange("Hello, World!");
  }
}

这种方式通过分布式条件生成对应元组参数，TS能准确推断不同multiple值下的onChange类型，内部分支也能正确匹配参数类型。

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