使用 TypeScript 获取 API 数据：使用类型断言

Source: Dev.to

理解问题

当我们在 JavaScript 中从 API 获取数据时，通常会这样写：

const response = await fetch("https://randomuser.me/api/?results=3");
const data = await response.json();
console.log(data);

JavaScript 并不关心类型。即使 API 更改了结构或字段，代码仍会运行。

在 TypeScript 中，response.json() 返回 any（或在某些设置下返回 unknown）。TypeScript 并不知道数据的形状，因此我们无法安全地访问嵌套属性，否则会有错误风险。这时就需要类型断言。

[Image: RandomUser API 返回的 JSON 结构]

[Image: EscuelaJS Products API 返回的 JSON 结构]

使用 TypeScript 类型断言

类型断言告诉 TypeScript：“我比你更了解这段数据的结构。”

[Image: 类型断言示例]

示例

const data = await response.json();

const users = data as unknown as {
  results: {
    name: { first: string; last: string };
    email: string;
    picture: { large: string };
  }[];
};

• data 在 response.json() 之后的类型是 unknown。
• as unknown as { … } 告诉 TypeScript：“把 data 当作包含 results 数组且结构完全符合此定义的对象。”

这使我们能够安全地访问诸如 results[0].name.first 的嵌套属性，而不会收到 TypeScript 的报错。双重断言（as unknown as）有时是必需的，因为 TypeScript 过于保守，直接转换会被拒绝。

[Image: 双重断言示意图]

将 API 数据映射到自定义类型

即使完成了类型断言，整个应用中到处暴露完整的嵌套 API 结构也会很繁琐。更好的做法是把数据映射为更简洁的内部类型：

export type User = {
  name: string;
  email: string;
  picture: string;
};

return users.results.map(u => ({
  name: `${u.name.first} ${u.name.last}`,
  email: u.email,
  picture: u.picture.large,
}));

这样，应用的其余部分只需处理干净、可预测的 User[] 数组，能够获得正确的类型检查和自动补全支持。

为什么这很重要

通过这次练习，我意识到 TypeScript 在以下方面的帮助：

• 防止运行时崩溃 – TS 在代码运行前捕获错误。
• 自动补全 / IntelliSense – 更快编写代码，减少拼写错误。
• 自我文档化的代码 – 类型向阅读代码的人明确说明数据结构。
• 安全的重构 – 如果字段被重命名或 API 发生变化，TS 会给出警告。

即使是像获取用户或产品这样的小实验，也能让你了解在真实项目中如何使用带类型的异步流程。

要点

• TypeScript 并不会自动知道 API 数据的结构；我们需要通过类型或类型断言来教会它。
• 将 API 数据映射到我们自己的类型可以让应用更安全、更易于维护。