在 TypeScript 中使用 JSON：面向初学者的解析与序列化

轻松学习Python，无需理论负担。在浏览器中直接解决带自动检查的实践任务，无需安装任何东西。

引言：为什么 JSON 和 TypeScript 是理想组合

在现代 Web 开发中，JSON（JavaScript 对象表示法）已成为客户端与服务器之间数据交换、配置存储以及 API 信息传输的通用格式。TypeScript 作为 JavaScript 的超集，为这种灵活性增添了强大的类型系统，使得 JSON 操作不仅方便，而且安全。在本文中，我们将探讨如何正确解析（将 JSON 字符串转换为对象）和序列化（将对象转换为 JSON 字符串）数据，并使用 TypeScript。本材料面向已经熟悉 TypeScript 基础但希望自信地处理 JSON 的初学者开发者。

\n\n

您将学到什么

如何使用内置方法 JSON.parse() 和 JSON.stringify()。
如何在解析时对数据进行类型化以防止错误。
如何处理异常并验证 JSON 的正确性。
包含真实场景的实用示例。

\n\n

1. 基础：JSON.parse() 和 JSON.stringify() 方法

TypeScript 从 JavaScript 继承了两种用于处理 JSON 的全局方法。它们无需导入额外库即可使用。

\n\n

1.1. 将 JSON 解析为对象：JSON.parse()

JSON.parse() 方法接受一个 JSON 格式的字符串，并返回一个 JavaScript 对象（或数组、数字、字符串）。在 TypeScript 中，我们可以通过泛型指定预期的结果类型。

// 无类型化的简单示例\nconst jsonString = '{"name": "Alice", "age": 30}';\nconst user = JSON.parse(jsonString);\nconsole.log(user.name); // "Alice"

\n\n

1.2. 将对象序列化为 JSON：JSON.stringify()

JSON.stringify() 方法将 JavaScript 对象或值转换为 JSON 字符串。它会自动处理所有原始类型、数组和简单对象。

const user = {\n  name: "Bob",\n  age: 25,\n  isAdmin: false\n};\nconst jsonString = JSON.stringify(user);\nconsole.log(jsonString); // '{"name":"Bob","age":25,"isAdmin":false}'

\n\n

2. 在 TypeScript 中解析 JSON 时的数据类型化

TypeScript 的主要优势在于可以为解析结果指定类型。这可以在编译时保护代码免受错误影响，并使其具有自文档性。

\n\n

2.1. 使用接口和泛型

创建一个描述数据结构的接口，并将其作为泛型传递给 JSON.parse()：

interface User {\n  id: number;\n  name: string;\n  email: string;\n  isActive: boolean;\n}\n\nconst jsonData = '{"id": 1, "name": "Victor", "email": "victor@example.com", "isActive": true}';\nconst user: User = JSON.parse(jsonData);\nconsole.log(user.email); // "victor@example.com"\n// user.id 现在是严格的 number 类型

\n\n

2.2. 处理嵌套对象和数组

接口可以很好地处理复杂结构：

interface Address {\n  city: string;\n  zip: string;\n}\n\ninterface Employee {\n  id: number;\n  name: string;\n  address: Address;\n  skills: string[];\n}\n\nconst employeeJson = '{"id": 101, "name": "Elena", "address": {"city": "Moscow", "zip": "101000"}, "skills": ["TS", "JS", "Python"]}';\nconst employee: Employee = JSON.parse(employeeJson);\nconsole.log(employee.address.city); // "Moscow"

\n\n

2.3. 如果类型不匹配会发生什么？

重要的是要理解：TypeScript 仅在编译阶段检查类型。如果在运行时传入的 JSON 具有不同的结构（例如，age 是字符串而不是数字），错误会出现在代码中，但不会出现在 JSON.parse() 中。为了完全安全，请使用运行时验证器（例如 Zod 或 io-ts），但对于大多数学习项目，接口就足够了。

\n\n