TypeScript 中如何处理 JSON 数据

JSON（JavaScript 对象表示法）是在 Web 开发中最常用的数据交换格式之一。TypeScript 对 JSON 数据的处理提供了更好的类型检查和代码提示，同时也减少了出错的风险。在本文中，我们将介绍如何在 TypeScript 中处理 JSON 数据，并给出相关的示例代码。

1. 使用 JSON.parse()

使用 JSON.parse() 方法可以将 JSON 字符串转换为 JavaScript 对象，示例代码如下：

const jsonStr = '{ "name": "Tom", "age": 18 }';
const person = JSON.parse(jsonStr);
console.log(person.name); // 输出 "Tom"

在 TypeScript 中，编译器会推断 JSON.parse() 的返回类型为 any，因此我们需要手动指定转换后的对象类型，示例代码如下：

interface Person {
  name: string;
  age: number;
}

const jsonStr = '{ "name": "Tom", "age": 18 }';
const person: Person = JSON.parse(jsonStr);
console.log(person.age); // 输出 18

2. 使用 JSON.stringify()

使用 JSON.stringify() 方法可以将 JavaScript 对象转换为 JSON 字符串，示例代码如下：

const person = { name: 'Tom', age: 18 };
const jsonStr = JSON.stringify(person);
console.log(jsonStr); // 输出 "{ "name": "Tom", "age": 18 }"

在 TypeScript 中，我们同样需要手动指定转换前的对象类型，示例代码如下：

interface Person {
  name: string;
  age: number;
}

const person: Person = { name: 'Tom', age: 18 };
const jsonStr = JSON.stringify(person);
console.log(jsonStr); // 输出 "{ "name": "Tom", "age": 18 }"

3. 使用 JSON 类型

TypeScript 中可以使用 JSON 类型来获取 JSON 对象和字符串的类型，示例代码如下：

const jsonStr: string = '{ "name": "Tom", "age": 18 }';
const person: JSON = JSON.parse(jsonStr);
console.log(person.age); // 输出 18

4. 处理非标准 JSON 字符串

有时候，我们可能会遇到非标准的 JSON 字符串，例如键没有双引号包裹等，而这些字符串无法通过 JSON.parse() 方法进行转换。此时，我们可以借助第三方库 json5 来进行转换，示例代码如下：

import JSON5 from 'json5';

const jsonStr = "{ name: 'Tom', age: 18 }";
const person = JSON5.parse(jsonStr);
console.log(person.name); // 输出 "Tom"

总结

以上就是 TypeScript 中如何处理 JSON 数据的详细介绍。我们可以使用 JSON.parse() 和 JSON.stringify() 方法进行转换，也可以使用 JSON 类型来获取 JSON 对象和字符串的类型。同时，我们也了解了如何处理非标准 JSON 字符串。希望本文能对大家有所帮助，也希望读者们能够掌握 TypeScript 中处理 JSON 数据的方法并运用到实际开发中。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fc324cf6b2d6eab32113d4