TypeScript 如何在类中转换JSON对象

在TypeScript中，将JSON对象转换为类中的对象可以是一种有用的技术，可以将JSON数据映射到结构化的TypeScript对象中。通过明确定义类型，我们可以确保类型安全并无缝地访问JSON对象的属性。在本教程中，我们将指导您如何在TypeScript类中转换JSON对象，使用户能够充分利用TypeScript的静态类型。

语法

用户可以按照以下语法在TypeScript类中创建一个JSON对象的转换。

class MyClass {
   // Define class properties
   property1: string;
   property2: number;
   constructor(json: any) {

      // Cast the JSON object to the class type
      const castedJson = json as MyClass;

      // Assign properties from the JSON object
      this.property1 = castedJson.property1;
      this.property2 = castedJson.property2;
   }
}

在上述语法中，我们创建了一个名为MyClass的类，其中包含属性property1（类型为string）和property2（类型为number）。构造函数接受一个名为json（类型为any）的参数，表示JSON对象。

在构造函数内部，使用关键字进行类型转换，将json对象转换为MyClass的实例。然后，将castedJson的属性赋值给类的相应属性。

示例1

在此示例中，我们定义了一个名为Person的类，其中包含name、age和email的属性。构造函数接受一个名为json（类型为any）的参数，表示JSON对象。

之后，我们使用类型断言将json对象转换为Person类的实例。然后，将castedJson对象的属性赋值给类的相应属性。

接下来，在Person类内部定义了一个名为displayDetails()的方法。该方法将人的姓名、年龄和电子邮件通过将它们记录在控制台中来显示出来。

最后，我们创建了一个名为jsonData的JSON对象，表示一个人的详细信息。我们通过将jsonData传递给构造函数来创建一个名为person的Person类的实例。然后，我们调用person对象上的displayDetails()方法来访问并显示该人的详细信息。

// Define the Person class
class Person {
   name: string;
   age: number;
   email: string;
   constructor(json: any) {
      const castedJson = json as Person;
      this.name = castedJson.name;
      this.age = castedJson.age;
      this.email = castedJson.email;
   }

   displayDetails() {
      console.log(`Name: {this.name}`);
      console.log(`Age:{this.age}`);
      console.log(`Email: ${this.email}`);
   }
}

// Creating a JSON object representing a person
const jsonData = {
   "name": "John Doe",
   "age": 30,
   "email": "johndoe@example.com"
};

// Creating an instance of the Person class
const person = new Person(jsonData);

// Accessing and displaying the person's details
person.displayDetails();

编译时，它将生成以下JavaScript代码−

// Define the Person class
var Person = /** @class */ (function () {
   function Person(json) {
      var castedJson = json;
      this.name = castedJson.name;
      this.age = castedJson.age;
      this.email = castedJson.email;
   }
   Person.prototype.displayDetails = function () {
      console.log("Name: ".concat(this.name));
      console.log("Age: ".concat(this.age));
      console.log("Email: ".concat(this.email));
   };
   return Person;
}());

// Creating a JSON object representing a person
var jsonData = {
   "name": "John Doe",
   "age": 30,
   "email": "johndoe@example.com"
};

// Creating an instance of the Person class
var person = new Person(jsonData);

// Accessing and displaying the person's details
person.displayDetails();

输出

以上代码将产生以下输出 –

Name: John Doe
Age: 30
Email: johndoe@example.com

示例2

在这个例子中，我们定义了一个代表员工的TypeScript类Employee。该类拥有姓名、职位和薪水属性。构造函数接受一个类型为any的参数json，表示JSON对象。

通过将json对象转换为Employee类的实例，使用类型断言，我们确保将JSON对象视为员工对象。

我们还有一个方法calculateAnnualBonus()，根据员工的薪水计算年度奖金。在这个例子中，我们假设固定的奖金百分比是10%。

displayEmployeeSummary()方法提供了员工详细信息的交互式摘要。它展示了员工的姓名、职位、薪水（使用正确的货币符号格式化）和计算出的年度奖金（也使用正确的货币符号进行格式化）。

然后，我们创建了一个名为jsonData的JSON对象，表示员工的详细信息。

通过创建一个名为employee的Employee类的实例，并将jsonData传递给构造函数，我们将JSON对象转换为Employee类。

最后，我们调用employee对象上的displayEmployeeSummary()方法，以访问和显示员工的摘要。

class Employee {
   name: string;
   position: string;
   salary: number;
   constructor(json: any) {
      const castedJson = json as Employee;

      this.name = castedJson.name;
      this.position = castedJson.position;
      this.salary = castedJson.salary;
   }
   calculateAnnualBonus(): number {
      const bonusPercentage = 0.1; // 10% bonus
      const bonusAmount = this.salary * bonusPercentage;
      return bonusAmount;
   }
   displayEmployeeSummary() {
      console.log(`Name: {this.name}`);
      console.log(`Position:{this.position}`);
      console.log(`Salary: {this.salary.toLocaleString()}`);
      console.log(`Annual Bonus:{this.calculateAnnualBonus().toLocaleString()}`);
   }
}

// Creating a JSON object representing an employee
const jsonData = {
   "name": "John Smith",
   "position": "Senior Developer",
   "salary": 80000
};

// Creating an instance of the Employee class
const employee = new Employee(jsonData);

// Displaying the employee summary
employee.displayEmployeeSummary();

在编译时，它将生成以下JavaScript代码-

var Employee = /** @class */ (function () {
   function Employee(json) {
      var castedJson = json;
      this.name = castedJson.name;
      this.position = castedJson.position;
      this.salary = castedJson.salary;
   }
   Employee.prototype.calculateAnnualBonus = function () {
      var bonusPercentage = 0.1; // 10% bonus
      var bonusAmount = this.salary * bonusPercentage;
      return bonusAmount;
   };
   Employee.prototype.displayEmployeeSummary = function () {
      console.log("Name: ".concat(this.name));
      console.log("Position: ".concat(this.position));
      console.log("Salary: ".concat(this.salary.toLocaleString()));
      console.log("Annual Bonus:".concat(this.calculateAnnualBonus().toLocaleString()));
   };
   return Employee;
}());

// Creating a JSON object representing an employee
var jsonData = {
   "name": "John Smith",
   "position": "Senior Developer",
   "salary": 80000
};

// Creating an instance of the Employee class
var employee = new Employee(jsonData);

// Displaying the employee summary
employee.displayEmployeeSummary();

输出

上述代码将产生以下输出 −

Name: John Smith
Position: Senior Developer
Salary: 80,000
Annual Bonus:8,000

通过本教程，用户已经学会了如何在TypeScript类中转换JSON对象。通过使用类型断言，用户可以确保类型安全，并将JSON数据无缝映射到结构化的TypeScript对象。在处理基于JSON的API或在TypeScript项目中需要强类型数据时，这种技术非常有价值。