使用 fetch 发起请求后，调用返回的 response 对象的 .json() 方法即可获取数据。由于 typescript 无法自动推断网络响应的具体结构，你需要定义一个接口（interface）来描述数据的形状，并在代码中通过类型断言将 promise 转换为具体的类型，从而获得完整的智能提示和编译检查。
如何为 fetch 响应定义 TypeScript 接口
在 TypeScript 中处理 API 数据的第一步是明确数据结构。你可以通过 interface 或 type 关键字定义与后端 JSON 对应的类型。例如，如果接口返回用户信息，可以定义包含 id、name 等字段的接口。这样，当你在代码中使用这些数据时，TypeScript 编译器就能检查属性是否存在以及类型是否正确。
interface User {
id: number;
name: string;
email: string;
}
// 假设这是从 API 获取到的原始数据
const rawData = {
id: 1,
name: "Alice",
email: "alice@example.com"
};
// 使用类型断言将原始数据转换为 User 类型
const user: User = rawData as User;
上述代码定义了 User 接口，并通过 as User 断言将对象转换为该类型。如果 rawData 缺少 email 字段，TypeScript 会在编译时报错。这种显式声明确保了后续代码中对 user.email 的访问是安全的。
如何在 async/await 中结合 fetch 和类型断言
实际开发中，通常使用 async/await 语法来处理异步的 fetch 请求。你可以创建一个封装函数，内部执行请求并返回带有类型注解的数据。关键在于 fetch 返回的是 Promise，而 response.json() 返回的是 Promise。为了获得类型安全，需要在调用 json() 后对结果进行类型断言。
async function fetchUser(userId: number): Promise<user> {
const response = await fetch(`/api/users/${userId}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
// 将 any 类型的 JSON 数据断言为 User 类型
const data: User = await response.json() as User;
return data;
}
// 使用示例
async function main() {
try {
const user = await fetchUser(1);
console.log(user.name); // TypeScript 知道 user 有 name 属性
} catch (error) {
console.error('Failed to fetch user:', error);
}
}</user>
这段代码展示了完整的流程：发起请求、检查状态码、解析 JSON 并进行类型断言。通过 as User，我们告诉 TypeScript 这个 JSON 对象符合 User 接口的定义。如果在运行时数据格式不匹配，虽然 TypeScript 不会报错，但运行时的属性访问可能会出错，因此建议配合运行时校验库（如 Zod 或 Yup）使用以增强健壮性。
如何处理 fetch 返回的嵌套对象或数组数据
当接口返回的数据结构更复杂，例如包含嵌套对象或数组时，TypeScript 的类型定义也需要相应地细化。你可以使用泛型或交叉类型来描述这些复杂结构。例如，如果 API 返回一个包含多个用户的列表，或者每个用户关联着一个地址对象，你需要定义相应的嵌套接口。
interface Address {
street: string;
city: string;
zipCode: string;
}
interface UserWithAddress extends User {
address: Address;
}
interface ApiResponse<t> {
code: number;
message: string;
data: T;
}
async function fetchUsers(): Promise<apiresponse>> {
const response = await fetch('/api/users');
const result: ApiResponse<userwithaddress> = await response.json() as ApiResponse<userwithaddress>;
return result;
}
// 使用示例
async function loadUsers() {
const apiResponse = await fetchUsers();
if (apiResponse.code === 200) {
const users = apiResponse.data;
// 可以安全访问嵌套属性
console.log(users[0].address.city);
}
}</userwithaddress></userwithaddress></apiresponse></t>
这里定义了 ApiResponse 泛型接口，用于包装标准的 API 响应结构。通过传入 UserWithAddress[] 作为泛型参数，我们明确了 data 字段是一个用户数组。在 fetchUsers 函数中，我们对整个响应对象进行了类型断言。这种方式不仅适用于数组，也适用于任何复杂的嵌套结构。通过组合基本类型和接口，TypeScript 能够精确追踪数据的流向，确保在访问深层属性时的类型安全。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
