TypeScript调用API时如何为fetch返回的响应正确指定类型

你写的两种写法均不可用 #

核心原因是：fetch() 方法返回的Promise resolve值是 Fetch标准的Response响应对象，不是接口直接返回的业务JSON数据，这个对象上只有status、headers、json()、text()这类HTTP响应相关的属性和方法，不存在你定义的id、code字段，直接给await fetch(url)的结果标注业务类型，属于完全错误的类型标注，TS虽然不会报编译错误，但运行时访问对应字段会直接拿到undefined。

• 第一种全量类型标注的写法错误：把Response对象强行标注为{id: string; code: string}类型，属于类型欺骗，和实际运行时的数据结构完全不符。
• 第二种解构id的写法错误逻辑和第一种一致：解构的目标是Response对象，根本不存在id字段，无法拿到你需要的值。

该场景的最佳实践 #

fetch拿到响应后必须先做状态校验、再解析响应体，才能拿到实际的业务数据，类型标注应该加在解析后的业务数据上，标准流程如下：

1. 等待fetch返回Response对象
2. 校验响应状态（fetch仅在网络故障、请求被拦截时才会reject，HTTP 4xx、5xx错误不会触发抛错，必须手动判断response.ok）
3. 调用response.json()解析响应体为JSON数据，给这个解析结果标注对应类型即可

完整使用示例 #

如果需要用到接口返回的所有字段：

// 提前定义接口返回的业务类型，方便复用
interface BizResponse {
  id: string;
  code: string;
}

const getBizData = async () => {
  const res = await fetch(url);
  // 先处理HTTP错误
  if (!res.ok) {
    throw new Error(`请求失败，状态码：${res.status}`);
  }
  // 解析JSON并标注类型，此时data就有完整的类型提示
  const data = await res.json<BizResponse>();
  // 可以直接安全访问data.id、data.code
  return data;
};

如果仅需要用到id字段，不需要定义完整类型，直接在解析时标注需要的结构再解构即可：

const getId = async () => {
  const res = await fetch(url);
  if (!res.ok) {
    throw new Error(`请求失败，状态码：${res.status}`);
  }
  // 仅标注需要的id字段类型，直接解构使用
  const { id } = await res.json<{ id: string }>();
  return id;
};

提示：如果你无法100%确定接口返回结构和定义的类型一致，不要只靠TS的静态类型标注，可以搭配运行时类型校验工具在解析JSON后做结构校验，避免实际返回字段缺失、类型错误导致的线上问题。

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