如何将JSON对象解析为TypeScript对象 [英] How to parse a JSON object to a TypeScript Object
问题描述
我目前正在尝试将收到的JSON对象转换为具有相同属性的TypeScript类,但无法使其正常工作.我在做什么错了?
I am currently trying to convert my received JSON Object into a TypeScript class with the same attributes and I cannot get it to work. What am I doing wrong?
员工类别
export class Employee{
firstname: string;
lastname: string;
birthdate: Date;
maxWorkHours: number;
department: string;
permissions: string;
typeOfEmployee: string;
note: string;
lastUpdate: Date;
}
员工字符串
{
"department": "<anystring>",
"typeOfEmployee": "<anystring>",
"firstname": "<anystring>",
"lastname": "<anystring>",
"birthdate": "<anydate>",
"maxWorkHours": <anynumber>,
"username": "<anystring>",
"permissions": "<anystring>",
"lastUpdate": "<anydate>"
//I will add note later
}
我的尝试
let e: Employee = new Employee();
Object.assign(e, {
"department": "<anystring>",
"typeOfEmployee": "<anystring>",
"firstname": "<anystring>",
"lastname": "<anystring>",
"birthdate": "<anydate>",
"maxWorkHours": 3,
"username": "<anystring>",
"permissions": "<anystring>",
"lastUpdate": "<anydate>"
});
console.log(e);
推荐答案
之所以编译器允许您将从 The reason that the compiler lets you cast the object returned from 一个简单的例子: (没有错误,因为 There's no error because 当您的类是简单的数据对象并且没有方法时,这很好用,但是一旦您引入了方法,事情就会崩溃: That works great when your classes are simple data objects and have no methods, but once you introduce methods then things tend to break: If you're trying to use 然后您将收到错误消息,因为它不是字符串,而是对象,如果您已经以这种形式使用它,则无需使用 Then you'll get the error because it's not a string, it's an object, and if you already have it in this form then there's no need to use 但是,正如我所写的那样,如果您采用这种方式,那么您将没有该类的实例,而只有一个具有与类成员相同属性的对象. But, as I wrote, if you're going with this way then you won't have an instance of the class, just an object that has the same properties as the class members. 如果您想要一个实例,那么: If you want an instance then: 这篇关于如何将JSON对象解析为TypeScript对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!JSON.parse
返回的对象强制转换为类,是因为JSON.parse
to a class is because typescript is based on structural subtyping.
You don't really have an instance of an Employee
, you have an object (as you see in the console) which has the same properties.class A {
constructor(public str: string, public num: number) {}
}
function logA(a: A) {
console.log(`A instance with str: "${ a.str }" and num: ${ a.num }`);
}
let a1 = { str: "string", num: 0, boo: true };
let a2 = new A("stirng", 0);
logA(a1); // no errors
logA(a2);
a1
满足类型A
,因为它具有所有属性,并且即使接收到的不是A
的实例,也可以在没有运行时错误的情况下调用logA
函数只要它具有相同的属性.a1
satisfies type A
because it has all of its properties, and the logA
function can be called with no runtime errors even if what it receives isn't an instance of A
as long as it has the same properties.class A {
constructor(public str: string, public num: number) { }
multiplyBy(x: number): number {
return this.num * x;
}
}
// this won't compile:
let a1 = { str: "string", num: 0, boo: true } as A; // Error: Type '{ str: string; num: number; boo: boolean; }' cannot be converted to type 'A'
// but this will:
let a2 = { str: "string", num: 0 } as A;
// and then you get a runtime error:
a2.multiplyBy(4); // Error: Uncaught TypeError: a2.multiplyBy is not a function
const employeeString = '{"department":"<anystring>","typeOfEmployee":"<anystring>","firstname":"<anystring>","lastname":"<anystring>","birthdate":"<anydate>","maxWorkHours":0,"username":"<anystring>","permissions":"<anystring>","lastUpdate":"<anydate>"}';
let employee1 = JSON.parse(employeeString);
console.log(employee1);
JSON.parse
on your object when it's not a string:let e = {
"department": "<anystring>",
"typeOfEmployee": "<anystring>",
"firstname": "<anystring>",
"lastname": "<anystring>",
"birthdate": "<anydate>",
"maxWorkHours": 3,
"username": "<anystring>",
"permissions": "<anystring>",
"lastUpdate": "<anydate>"
}
let employee2 = JSON.parse(e);
JSON.parse
.JSON.parse
.let e = new Employee();
Object.assign(e, {
"department": "<anystring>",
"typeOfEmployee": "<anystring>",
"firstname": "<anystring>",
"lastname": "<anystring>",
"birthdate": "<anydate>",
"maxWorkHours": 3,
"username": "<anystring>",
"permissions": "<anystring>",
"lastUpdate": "<anydate>"
});