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

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

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

JSON（JavaScript 对象表示法）是一种轻量级的数据交换格式，已成为 Web 应用程序的事实标准。而 TypeScript 则为 JavaScript 添加了静态类型检查，使数据处理更加安全且可预测。对于初学者开发者来说，理解如何在 TypeScript 中解析（将字符串转换为对象）和序列化（将对象转换为字符串）JSON 是一项基本技能。

在本文中，我们将全面介绍在 TypeScript 中使用 JSON 的各个方面：从基本操作到带有类型化的高级技巧。您将学习如何避免常见错误，并编写干净、可维护的代码。

TypeScript 中 JSON 解析基础

JSON 解析是将 JSON 格式的字符串转换为 TypeScript 对象的过程。主要工具是全局函数 JSON.parse()。然而，在 TypeScript 中，类型化方面有其特殊性。

基本 JSON 字符串解析

来看一个最简单的例子：我们有一个表示用户的 JSON 字符串。

const jsonString = '{"name": "安娜", "age": 28, "isStudent": false}';const user = JSON.parse(jsonString);console.log(user.name); // "安娜"console.log(user.age);  // 28

问题在于 TypeScript 不知道 user 对象的结构。默认情况下，JSON.parse() 返回 any 类型，这削弱了静态类型检查的优势。

解析结果的类型化

为了解决这个问题，我们可以显式指定返回值的类型。最简单的方法是使用类型断言（type assertion）。

interface User {    name: string;    age: number;    isStudent: boolean;}

const jsonString = '{"name": "安娜", "age": 28, "isStudent": false}';const user = JSON.parse(jsonString) as User;console.log(user.name); // TypeScript 知道 name 是 string 类型

现在 TypeScript 理解了对象的结构，并能在访问属性时检查其类型。

TypeScript 中对象序列化为 JSON

序列化是反向过程：将 TypeScript 对象转换为 JSON 字符串。使用的函数是 JSON.stringify()。

基本序列化示例

interface Product {    id: number;    title: string;    price: number;    inStock: boolean;}

const product: Product = {    id: 101,    title: "笔记本电脑",    price: 54999.99,    inStock: true};

const jsonString = JSON.stringify(product);console.log(jsonString);// {"id":101,"title":"笔记本电脑","price":54999.99,"inStock":true}

JSON.stringify() 函数会自动将对象转换为 JSON 字符串。需要注意的是，并非所有值都能被序列化：函数、undefined、Symbol 会被忽略或替换为 null。

使用 replacer 自定义序列化

有时需要控制哪些字段会出现在最终字符串中。为此，JSON.stringify() 接受第二个参数——一个 replacer 函数或键数组。

const product = {    id: 101,    title: "笔记本电脑",    price: 54999.99,    discount: 10,    secretCode: "SECRET123"};

// 排除机密数据const safeJson = JSON.stringify(product, (key, value) => {    if (key === 'secretCode') {        return undefined; // 跳过此字段    }    return value;});console.log(safeJson);// {"id":101,"title":"笔记本电脑","price":54999.99,"discount":10}