Typescript中Promise.race的返回类型是什么？如何定义对应变量类型？

Promise.race 的返回值类型是传入的所有 Promise 实例返回值类型的联合类型，你遇到的报错对应两个常见错误：

1. await 已经把 Promise 解包为实际返回值，你给 response 标注了 Promise 类型才会触发Type 'unknown' is not assignable to type 'Promise'的错误
2. 你的 apicall 和 timeoutPromise 没有提前标注返回类型，TypeScript 无法自动推断才会 fallback 为 unknown 类型

正确写法示例 #

1. 先定义异步函数的返回类型 #

// 定义接口请求的返回结构
type ApiRes = {
  code: number
  data: Record<string, any>
  message: string
}
// 定义超时场景的返回结构
type TimeoutRes = {
  isTimeout: boolean
  message: string
}

// 给两个异步函数标注返回的Promise类型
function apicall(): Promise<ApiRes> {
  return fetch('/your/api/path').then(res => res.json())
}
// 超时Promise同样标注返回类型
function timeoutPromise(ms: number): Promise<TimeoutRes> {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ isTimeout: true, message: '请求超时' }), ms)
  })
}

2. 给response标注联合类型 #

// response的类型是两个异步函数返回值的联合类型即可
const response: ApiRes | TimeoutRes = await Promise.race([
  apicall(),
  timeoutPromise(10000)
])

3. 后续类型收窄处理 #

拿到response后可以通过简单的属性判断收窄类型，TypeScript会自动推导对应分支的类型：

if ('isTimeout' in response) {
  // 此分支下response自动识别为TimeoutRes类型，处理超时逻辑
  console.log(response.message)
} else {
  // 此分支下response自动识别为ApiRes类型，处理接口返回逻辑
  console.log(response.data)
}

如果你的timeoutPromise没有返回值，只是抛出超时错误，那可以将它的返回类型标注为Promise<never>，这种情况下Promise.race的返回值就只有ApiRes类型，不需要写联合类型。

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