TypeScript 中的 JSON 处理：数据解析与序列化

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

介绍

JSON（JavaScript 对象表示法）是一种轻量级数据交换格式，广泛应用于 Web 开发中客户端与服务器之间的信息传输。TypeScript 作为 JavaScript 的严格类型超集，为安全便捷地处理 JSON 提供了强大的工具。在本文中，我们将详细介绍如何在 TypeScript 中执行 JSON 解析和序列化，如何使用类型确保数据正确性，以及如何避免常见错误。

正确处理 JSON 对于创建可靠且可扩展的应用程序至关重要。TypeScript 不仅允许将 JSON 字符串转换为对象以及反向转换，还可以保证数据的结构和类型符合预期。这在处理 API、配置文件和数据库时尤其有用。

TypeScript 中 JSON 解析的基础知识

JSON 解析是将 JSON 字符串转换为 TypeScript 对象的过程。全局方法 JSON.parse() 用于此目的。然而，与 JavaScript 不同，在 TypeScript 中我们可以指定期望的结果类型，这使得代码更具可预测性。

不指定类型的简单解析

解析 JSON 字符串的基本示例：

const jsonString = '{"name": "Anna", "age": 30, "city": "Moscow"}';const user = JSON.parse(jsonString);console.log(user.name); // "Anna"

在这种情况下，TypeScript 会将变量 user 的类型推断为 any，这降低了类型安全性。最好使用显式类型指定。

通过接口指定类型的解析

最正确的方法是定义一个接口并在解析时使用它：

interface User {  name: string;  age: number;  city: string;}

const jsonString = '{"name": "Anna", "age": 30, "city": "Moscow"}';const user: User = JSON.parse(jsonString);console.log(user.name); // TypeScript 知道这是一个字符串

这种方法允许 IDE 提供自动完成功能并在编译时检查类型。

解析错误处理

JSON 字符串可能格式错误，因此处理异常很重要：

function safeParseJSON<T>(json: string): T | null {  try {    return JSON.parse(json) as T;  } catch (error) {    console.error('JSON parsing error:', error);    return null;  }}

const invalidJson = '{"name": "Anna", age: 30}'; // 无效的 JSONconst result = safeParseJSON<User>(invalidJson);if (result) {  console.log(result.name);} else {  console.log('Failed to parse JSON');}

safeParseJSON 函数接受一个泛型参数，使其可以重复用于不同的数据类型。

将对象序列化为 JSON

序列化是将 TypeScript 对象转换为 JSON 字符串的反向过程。方法 JSON.stringify() 用于此目的。TypeScript 没有为此方法添加新功能，但有助于控制哪些数据最终出现在结果字符串中。

基本序列化

const user: User = {  name: "Ivan",  age: 25,  city: "Saint Petersburg"};

const jsonString = JSON.stringify(user);console.log(jsonString); // {"name":"Ivan","age":25,"city":"Saint Petersburg"}

使用替换器进行字段过滤

JSON.stringify() 的第二个参数是一个替换器函数，允许控制结果中包含哪些字段：

const jsonStringFiltered = JSON.stringify(user, (key, value) => {  if (key === 'age') {    return undefined; // 排除 age 字段  }  return value;});console.log(jsonStringFiltered); // {"name":"Ivan","city":"Saint Petersburg"}

这在需要隐藏敏感数据或减少传输信息大小时非常有用。