TypeScript中如何为fetch返回的Response对象标注类型？

内置类型说明 #

TypeScript 原生提供了Web标准Response类型，完全不需要手动创建包含所有属性的自定义类型。只要你的项目tsconfig配置中引入了DOM标准库（前端Web项目默认开启），或者Node.js版本≥18（自带fetch实现和对应类型），就可以直接使用这个类型。

代码修正与正确标注 #

你原本的代码存在时序逻辑问题：往数组里push的是then回调中拿到的Response实例，但调用Promise.all时异步请求可能还没执行完成，会导致拿到的结果不全。Promise.all接收的是Promise构成的数组，不需要手动在then里push结果，正确写法如下：

// 存储fetch返回的Promise数组，明确标注类型
const fetchTasks: Promise<Response>[] = [];

// 把每个fetch请求返回的Promise直接加入数组，支持并行发起多个请求
fetchTasks.push(
  fetch(URL, {
    headers: {
      // 你的请求头配置
    }
  })
);

// 等待所有请求完成，拿到的结果就是Response对象组成的数组
const responses: Response[] = await Promise.all(fetchTasks);
return responses;

注意：不要在.then回调里手动push最终结果到数组再传给Promise.all，这种写法无法保证执行到Promise.all时所有异步任务都已经完成，会出现偶发的结果缺失问题。

补充说明 #

• 如果你确实需要手动存储已返回的Response实例，直接给数组标注Response[]类型即可：

  const results: Response[] = [];
  

• 如果你的项目运行在不自带fetch的旧版Node.js环境，只要安装了对应fetch实现的类型包（比如undici、whatwg-fetch对应的类型声明），依然可以直接使用全局Response类型，不需要额外自定义。

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