TypeScript 中 Fetch 实现类型安全的关键是主动声明响应数据结构并显式标注解析类型。需先定义 interface 描述接口返回格式，再通过泛型调用 response.json() 或封装泛型请求函数，配合统一响应包装类型（如 ApiResponse）确保全程类型推导准确。
Fetch 本身不带类型，TypeScript 需要你主动声明响应数据的结构，才能实现真正的类型安全。关键不是“让 Fetch 有类型”，而是“告诉 TypeScript 你期待什么格式的数据”，并在解析时明确标注。
定义接口描述响应结构
先用 interface 或 type 描述你从后端拿到的数据长什么样。比如用户接口返回：
id: numbername: string-
email?: string（可选字段）
那就写：
interface User {
id: number;
name: string;
email?: string;
}
在 .json() 解析时显式标注类型
fetch 返回的 response.json() 默认是 any，必须手动加类型断言或泛型调用：
立即学习“Java免费学习笔记（深入）”；
- 方式一：类型断言（简单直接）
const data = await response.json() as User; - 方式二：泛型调用（更推荐，避免意外绕过检查）
const data = await response.json<user>();</user>
注意：仅靠断言不能校验实际响应是否符合结构——它只约束你后续怎么用 data。所以接口定义必须和后端真实返回一致。
封装成泛型函数复用类型
把重复逻辑抽出来，让每个请求都自动带上类型：
async function apiGet<T>(url: string): Promise<T> {
const res = await fetch(url);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json<T>();
}
// 使用时直接指定 T
const user = await apiGet<User>('/api/user/123');
// 此时 user 的类型就是 User，IDE 能提示 id/name/email，编译器也能检查误用
处理统一响应包装格式
多数项目后端会包一层通用结构，例如：
{
"code": 0,
"message": "success",
"data": { "id": 1, "name": "Alice" }
}
对应定义：
interface ApiResponse<T> {
code: number;
message: string;
data: T;
}
// 请求时
const res = await apiGet<ApiResponse<User>>('/api/user/123');
if (res.code === 0) {
const user = res.data; // 类型为 User，安全使用
}
类型不是魔法，它依赖你写的接口是否准确、是否在解析时真正启用。只要这两步做实，Fetch 就能成为类型安全链路的一环。
