为何带多类型的泛型函数在VS Code中触发编译时错误

咱们先把问题拆解开看，你遇到的编译错误本质是类型不匹配——第三个Test类的GetValue方法参数类型被限定成了函数，但你直接传了一个布尔值，类型系统当然会拦你啦！

一步步拆解问题 #

先看你第三个代码块里的方法定义：

class Test<T>{
  GetValue<B>(value: (x: T) => B|string|boolean|number|undefined) {
    return value;
  }
}

这里的value参数被明确声明为函数类型：它需要接收一个T类型的参数x，返回值是B和string|boolean|number|undefined的联合类型。

为什么两种调用结果不同？

• 能正常运行的调用：new Test<Item>().getValue(x=> x.name)
  这个箭头函数完全符合方法要求的函数签名——接收Item类型的x，返回x.name（假设name是字符串，属于联合类型里的string），所以类型检查通过。
• 报错的调用：new Test<Item>().getValue(true)
  你传递的是一个布尔值true，但方法期望的是一个函数，布尔值和函数类型是完全不兼容的两种类型，TypeScript的类型检查器自然会抛出编译错误。

对比前两个正确的例子 #

• 第一个例子：GetValue的参数是string|boolean|number|undefined（原始值联合类型），所以传true、数字都没问题；
• 第二个例子：GetValue的参数是(x: T) => B（函数类型），所以传函数没问题；
• 第三个例子你把参数类型改成了纯函数类型（只是返回值加了联合），所以只能传符合签名的函数，不能传原始值。

修复方案：让方法同时支持函数和原始值 #

如果你想让GetValue既接受函数，又接受原始值，需要把参数类型改成函数类型和原始值类型的联合：

class Test<T>{
  GetValue<B>(value: ((x: T) => B|string|boolean|number|undefined) | string | boolean | number | undefined) {
    return value;
  }
}

// 现在两种调用都能正常运行了
new Test<Item>().getValue(x=> x.name)
new Test<Item>().getValue(true)

这样修改后，value参数既可以是符合要求的函数，也可以是你指定的那些原始值类型，类型检查就能通过了。

内容的提问来源于stack exchange，提问作者Alen.Toma