TypeScript泛型约束为string|string[]时返回值报错如何修复

你定义的泛型Params约束为string | string[]，但TS的类型系统无法确认你返回的大写结果和输入的Params子类型完全匹配：比如输入是字符串字面量类型"test"（属于string的子类型），你返回的"TEST"和原输入子类型不一致，因此会抛出该类型错误。

方案1：使用函数重载（推荐，类型更安全、可读性更高） #

通过重载明确定义不同入参对应的返回值类型，是该场景的最优解法：

// 重载签名：入参为字符串时返回字符串
function uppercase(params: string): string
// 重载签名：入参为字符串数组时返回字符串数组
function uppercase(params: string[]): string[]
// 实现签名
function uppercase(params: string | string[]): string | string[] {
  if (typeof params === "string") {
    return params.toUpperCase()
  }
  return params.map(param => param.toUpperCase())
}

使用时会自动匹配类型：

const strRes = uppercase('hello') // 类型推导为 string
const arrRes = uppercase(['hello', 'world']) // 类型推导为 string[]

方案2：使用类型断言（快速修复场景） #

如果不想改动原有泛型结构，可在返回值处增加类型断言，手动告知TS你已经保证返回值类型和入参类型匹配：

const uppercase = <Params extends string | string[]>(params: Params): Params => {
  if (typeof params === "string") {
    return params.toUpperCase() as Params
  }
  return params.map(param => param.toUpperCase()) as Params
}

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