如何在 TypeScript 类中转换 JSON 对象？

我们使用 JSON 对象在服务器和客户端应用程序之间或本地节点项目中存储和传输数据。在 Typescript 中，有两种类型的对象。

普通对象：当我们尝试使用 JSON.parse() 方法解析 JSON 数据时，我们得到一个普通对象而不是类对象。
类（构造函数）对象：类对象是 Typescript 类的实例，具有自己定义的属性、构造函数和方法。

例子：

数据 1：假设我们在客户端定义了一个 Typescript 类：

class Todo {
    userId: number;
    id: number;
    title: string;
    done: boolean;
   
    getTitle() {
        return this.title;
    }
   
    isDone() {
        return this.done;
    }
}

数据 2：我们的项目中本地存储了一个 JSON 对象：

{
    "userId": 1,
    "id": 1,
    "title": "Add Info about the new project",
    "done": true
}

上述 JSON 对象可以由服务器发送到网页或任何其他客户端应用程序。如果我们清楚地观察，JSON 对象的结构与 Typescript 类的结构是等价的，但如果我们要访问 JSON 对象的 Todo 类的方法怎么办！我们有两种方法可以完成这个任务，使用 Object 类的assign方法，它本质上将 JSON 对象克隆到 Todo 类对象。另一个是使用类转换器工具，该工具用于将 Typescript 对象转换为类对象。

方法 1：首先，我们必须在 TypeScript 文件中导入 JSON 对象，这可以通过使用 TypeScript 中的import关键字来完成，这会将 JSON 对象加载到 TypeScript 变量中。在我的例子中，我们将 JSON 文件存储在与我的 TypeScript 文件相同的目录中。然后，我们可以只使用Object.assign()方法，该方法将返回一个 Todo 类对象，我们可以访问 Todo 类中定义的方法。

方案一：

import jsonObhect from './todo.json';
   
// Defining our Todo class
class Todo {
    userId: number;
    id: number;
    title: string;
    done: boolean;
   
    getTitle() {
        return this.title;
    }
   
    isDone() {
            return this.done;
    }
}
   
// Object.assign() will clone jsonData into
// Todo class object Storing the new class
// object in a typescript variable
let newTodo = Object.assign(new Todo(), jsonData);
   
// Logging the output onto the console
console.log(newTodo);
console.log(newTodo.getTitle());

输出：

Todo {
  userId: 1,
  id: 1,
  title: 'Add Info about new project',
  done: true
}
Add Info about new project

方法 2：这里讨论的方法一对于简单的 JSON 对象来说既简单又有用，但是如果我们有一个具有复杂层次结构的对象或一组复杂的 JSON 对象，事情就会出错。为此，我们可以使用class-transformer工具，它可以使用 Node Package Manager 轻松安装在您的本地系统或节点项目中。在您的本地系统中，使用终端或命令窗口（取决于您的操作系统）执行以下命令。

命令： -g标志用于全局安装。我们将使用类转换器工具的plainToClass方法将我们的 JSON 对象转换为 TypeScript 类对象。
```
npm install -g class-transformer
```

这个方法有两个参数，第一个参数是 Todo 类的实例，第二个参数是从我们本地项目导入的 JSON 对象。首先，我们必须从 TypeScript 文件中的 class-transformer 工具导入方法，以便 TypeScript 知道要使用哪个方法。同样，我们将 JSON 文件存储在与 TypeScript 文件相同的目录中。

程序：

import jsonObhect from './todo.json';
import { plainToClass } from "class-transformer";
   
// Defining our Todo class
class Todo {
    userId: number;
    id: number;
    title: string;
    done: boolean;
   
    getTitle() {
        return this.title;
    }
   
    isDone() {
        return this.done;
    }
}
   
// plainToClass method will convert
// JSON data to Todo class object
// Storing the new class object in
// a typescript variable
let newTodo = plainToClass(Todo, jsonData);
   
// Logging the output to the console
console.log(newTodo);
console.log(newTodo.isDone());

输出：

Todo {
  userId: 1,
  id: 1,
  title: 'Add Info about new project',
  done: true
}
true

注意：我们可以用来将 JSON 数据转换为 TypeScript 接口的另一个有用工具是 json2ts。如果我们为上面的 JSON 对象测试这个工具，我们将得到下面的 TypeScript 接口。

declare module namespace {

    export interface RootObject {
        userId: number;
        id: number;
        title: string;
        done: boolean;
    }

}

然后，您使用生成的接口来定义您希望您的打字稿类遵循的语法。