我从远程REST服务器读取了JSON对象。此JSON对象具有Typescript类的所有属性(通过设计)。如何将收到的JSON对象转换为var类型?
我不想填充一个打字稿变量(即有一个采用此JSON对象的构造函数)。它很大,因此要在子对象之间按子对象复制所有内容,并按属性复制所有内容将花费大量时间。
更新:但是,您可以将其转换为打字稿界面!
我从远程REST服务器读取了JSON对象。此JSON对象具有Typescript类的所有属性(通过设计)。如何将收到的JSON对象转换为var类型?
我不想填充一个打字稿变量(即有一个采用此JSON对象的构造函数)。它很大,因此要在子对象之间按子对象复制所有内容,并按属性复制所有内容将花费大量时间。
更新:但是,您可以将其转换为打字稿界面!
Answers:
您不能简单地将Ajax请求中的原始JavaScript结果转换为原型JavaScript / TypeScript类实例。有许多技术可以做到这一点,并且通常涉及复制数据。除非您创建该类的实例,否则它将没有任何方法或属性。它将仍然是一个简单的JavaScript对象。
如果仅处理数据,则可以强制转换为接口(因为它纯粹是编译时结构),这将要求您使用TypeScript类,该类使用数据实例并对该数据执行操作。
复制数据的一些示例:
本质上,您只是:
var d = new MyRichObject();
d.copyInto(jsonResult);
JSON.parse()
。两者仍然需要完成,但是从语法上讲,可以将它们组合在一起。
Object.setPrototypeOf
我遇到了同样的问题,并且找到了一个可以完成此工作的库:https : //github.com/pleerock/class-transformer。
它是这样的:
let jsonObject = response.json() as Object;
let fooInstance = plainToClass(Models.Foo, jsonObject);
return fooInstance;
它支持嵌套的子级,但是您必须装饰类的成员。
@Type
注释)。这个答案值得更多的赞赏。
在TypeScript中,您可以使用接口和泛型来进行类型断言,如下所示:
var json = Utilities.JSONLoader.loadFromFile("../docs/location_map.json");
var locations: Array<ILocationMap> = JSON.parse(json).location;
ILocationMap在哪里描述数据的形状。此方法的优点是您的JSON可以包含更多属性,但形状可以满足接口的条件。
希望对您有所帮助!
如果您使用的是ES6,请尝试以下操作:
class Client{
name: string
displayName(){
console.log(this.name)
}
}
service.getClientFromAPI().then(clientData => {
// Here the client data from API only have the "name" field
// If we want to use the Client class methods on this data object we need to:
let clientWithType = Object.assign(new Client(), clientData)
clientWithType.displayName()
})
但是,遗憾的是,这种方式对嵌套对象无效。
Object.create(MyClass.prototype)
绕过构造函数来创建目标实例。
我发现了一篇关于将JSON通用转换为Typescript类的非常有趣的文章:
http://cloudmark.github.io/Json-Mapping/
您最终得到以下代码:
let example = {
"name": "Mark",
"surname": "Galea",
"age": 30,
"address": {
"first-line": "Some where",
"second-line": "Over Here",
"city": "In This City"
}
};
MapUtils.deserialize(Person, example); // custom class
TLDR:一支班轮
// This assumes your constructor method will assign properties from the arg.
.map((instanceData: MyClass) => new MyClass(instanceData));
详细答案
我不建议使用Object.assign方法,因为它可能会在类实例中使用未在类本身中声明的无关属性(以及定义的闭包)不适当地乱扔垃圾。
在您要反序列化的类中,我将确保定义了要反序列化的所有属性(null,空数组等)。通过使用初始值定义属性,可以在尝试迭代类成员以为其分配值时公开其可见性(请参见下面的反序列化方法)。
export class Person {
public name: string = null;
public favoriteSites: string[] = [];
private age: number = null;
private id: number = null;
private active: boolean;
constructor(instanceData?: Person) {
if (instanceData) {
this.deserialize(instanceData);
}
}
private deserialize(instanceData: Person) {
// Note this.active will not be listed in keys since it's declared, but not defined
const keys = Object.keys(this);
for (const key of keys) {
if (instanceData.hasOwnProperty(key)) {
this[key] = instanceData[key];
}
}
}
}
在上面的示例中,我只是创建了一个反序列化方法。在真实的示例中,我将其集中在可重用的基类或服务方法中。
这是在http响应之类的方法中利用此方法的方法...
this.http.get(ENDPOINT_URL)
.map(res => res.json())
.map((resp: Person) => new Person(resp) ) );
如果tslint / ide抱怨参数类型不兼容,只需使用尖括号将参数转换为相同类型<YourClassName>
,例如:
const person = new Person(<Person> { name: 'John', age: 35, id: 1 });
如果您具有特定类型的类成员(又名:另一个类的实例),则可以通过getter / setter方法将它们强制转换为类型化的实例。
export class Person {
private _acct: UserAcct = null;
private _tasks: Task[] = [];
// ctor & deserialize methods...
public get acct(): UserAcct {
return this.acct;
}
public set acct(acctData: UserAcct) {
this._acct = new UserAcct(acctData);
}
public get tasks(): Task[] {
return this._tasks;
}
public set tasks(taskData: Task[]) {
this._tasks = taskData.map(task => new Task(task));
}
}
上面的示例将acct和任务列表反序列化为它们各自的类实例。
假设json与您的打字稿类具有相同的属性,则不必将Json属性复制到您的打字稿对象。您只需要构造在构造函数中传递json数据的Typescript对象即可。
在您的Ajax回调中,您会得到一家公司:
onReceiveCompany( jsonCompany : any )
{
let newCompany = new Company( jsonCompany );
// call the methods on your newCompany object ...
}
为了使该工作:
1)在您的Typescript类中添加一个以json数据为参数的构造函数。在该构造函数中,您可以使用jQuery扩展json对象,如下所示:$.extend( this, jsonData)
。$ .extend允许在添加json对象的属性时保留javascript原型。
2)请注意,对于链接对象,您必须执行相同的操作。对于示例中的Employees,您还创建了一个构造函数,用于获取employees的部分json数据。您调用$ .map将json雇员转换为打字稿Employee对象。
export class Company
{
Employees : Employee[];
constructor( jsonData: any )
{
$.extend( this, jsonData);
if ( jsonData.Employees )
this.Employees = $.map( jsonData.Employees , (emp) => {
return new Employee ( emp ); });
}
}
export class Employee
{
name: string;
salary: number;
constructor( jsonData: any )
{
$.extend( this, jsonData);
}
}
这是我在处理Typescript类和json对象时发现的最佳解决方案。
没有什么可以自动检查您从服务器收到的JSON对象是否具有预期的(读取的符合)打字稿的接口属性。但是您可以使用用户定义的类型防护
考虑以下接口和一个愚蠢的json对象(它可以是任何类型):
interface MyInterface {
key: string;
}
const json: object = { "key": "value" }
三种可能的方式:
A.在变量后放置类型断言或简单的静态强制转换
const myObject: MyInterface = json as MyInterface;
B.在变量之前和钻石之间进行简单的静态投射
const myObject: MyInterface = <MyInterface>json;
C.高级动态转换,您可以检查自己的对象结构
function isMyInterface(json: any): json is MyInterface {
// silly condition to consider json as conform for MyInterface
return typeof json.key === "string";
}
if (isMyInterface(json)) {
console.log(json.key)
}
else {
throw new Error(`Expected MyInterface, got '${json}'.`);
}
您可以在这里玩这个例子
请注意,这里的困难是编写isMyInterface
函数。我希望TS早晚添加装饰器,以将复杂的类型导出到运行时,并让运行时在需要时检查对象的结构。现在,您可以使用目的大致相同的json模式验证器,也可以使用此运行时类型检查函数生成器
就我而言,它有效。我使用了Object.assign函数 (目标,源...)。首先,创建正确的对象,然后将数据从json对象复制到目标。
let u:User = new User();
Object.assign(u , jsonUsers);
以及更高级的使用示例。使用数组的示例。
this.someService.getUsers().then((users: User[]) => {
this.users = [];
for (let i in users) {
let u:User = new User();
Object.assign(u , users[i]);
this.users[i] = u;
console.log("user:" + this.users[i].id);
console.log("user id from function(test it work) :" + this.users[i].getId());
}
});
export class User {
id:number;
name:string;
fullname:string;
email:string;
public getId(){
return this.id;
}
}
this.users[i] = new User(); Object.assign(this.users[i], users[i])
this.users[i] = Object.assign(new User(), users[i]);
虽然它本身不是演员;我发现https://github.com/JohnWhiteTB/TypedJSON是一个有用的选择。
@JsonObject
class Person {
@JsonMember
firstName: string;
@JsonMember
lastName: string;
public getFullname() {
return this.firstName + " " + this.lastName;
}
}
var person = TypedJSON.parse('{ "firstName": "John", "lastName": "Doe" }', Person);
person instanceof Person; // true
person.getFullname(); // "John Doe"
您可以创建interface
自己的类型(SomeType
)并在其中投射对象。
const typedObject: SomeType = <SomeType> responseObject;
一个老问题,大多数情况下都是正确的,但不是很有效的答案。我提出以下建议:
创建一个包含init()方法和静态强制转换方法(用于单个对象和数组)的基类。静态方法可以在任何地方。具有基类和init()的版本可以在以后轻松扩展。
export class ContentItem {
// parameters: doc - plain JS object, proto - class we want to cast to (subclass of ContentItem)
static castAs<T extends ContentItem>(doc: T, proto: typeof ContentItem): T {
// if we already have the correct class skip the cast
if (doc instanceof proto) { return doc; }
// create a new object (create), and copy over all properties (assign)
const d: T = Object.create(proto.prototype);
Object.assign(d, doc);
// reason to extend the base class - we want to be able to call init() after cast
d.init();
return d;
}
// another method casts an array
static castAllAs<T extends ContentItem>(docs: T[], proto: typeof ContentItem): T[] {
return docs.map(d => ContentItem.castAs(d, proto));
}
init() { }
}
@ Adam111p帖子中提到了类似的机制(带有assign())。只是另一种(更完整的)方法。@Timothy Perez对assign()很关键,但是恕我直言,这在这里是完全合适的。
实现派生的(真实的)类:
import { ContentItem } from './content-item';
export class SubjectArea extends ContentItem {
id: number;
title: string;
areas: SubjectArea[]; // contains embedded objects
depth: number;
// method will be unavailable unless we use cast
lead(): string {
return '. '.repeat(this.depth);
}
// in case we have embedded objects, call cast on them here
init() {
if (this.areas) {
this.areas = ContentItem.castAllAs(this.areas, SubjectArea);
}
}
}
现在,我们可以转换从服务检索的对象:
const area = ContentItem.castAs<SubjectArea>(docFromREST, SubjectArea);
SubjectArea对象的所有层次结构都将具有正确的类。
用例/示例;创建一个Angular服务(再次抽象基类):
export abstract class BaseService<T extends ContentItem> {
BASE_URL = 'http://host:port/';
protected abstract http: Http;
abstract path: string;
abstract subClass: typeof ContentItem;
cast(source: T): T {
return ContentItem.castAs(source, this.subClass);
}
castAll(source: T[]): T[] {
return ContentItem.castAllAs(source, this.subClass);
}
constructor() { }
get(): Promise<T[]> {
const value = this.http.get(`${this.BASE_URL}${this.path}`)
.toPromise()
.then(response => {
const items: T[] = this.castAll(response.json());
return items;
});
return value;
}
}
使用变得非常简单;创建区域服务:
@Injectable()
export class SubjectAreaService extends BaseService<SubjectArea> {
path = 'area';
subClass = SubjectArea;
constructor(protected http: Http) { super(); }
}
服务的get()方法将返回已转换为SubjectArea对象(整个层次结构)的数组的Promise
现在说,我们还有另一个课程:
export class OtherItem extends ContentItem {...}
创建检索数据并将其强制转换为正确类的服务非常简单:
@Injectable()
export class OtherItemService extends BaseService<OtherItem> {
path = 'other';
subClass = OtherItem;
constructor(protected http: Http) { super(); }
}
您可以使用此站点为您生成代理。它生成一个类,并且可以解析和验证您的输入JSON对象。
我遇到了类似的需求。我想要可以使我轻松地从REST api调用到特定类定义的JSON转换的东西。我发现的解决方案不足或打算重写类的代码并添加注释或类似内容。
我想要在Java中使用GSON之类的东西来对类从JSON对象进行序列化/反序列化。
结合以后的需求,即该转换器也将在JS中运行,我结束了编写自己的程序包的工作。
但是,它有一些开销。但是启动时,添加和编辑非常方便。
您使用以下命令初始化模块:
然后在您的代码中,使用初始化的模块,例如:
const convertedNewClassesArray : MyClass[] = this.converter.convert<MyClass>(jsonObjArray, 'MyClass');
const convertedNewClass : MyClass = this.converter.convertOneObject<MyClass>(jsonObj, 'MyClass');
或,以JSON表示:
const jsonObject = this.converter.convertToJson(myClassInstance);
使用此链接到npm包,以及有关如何使用该模块的详细说明:json-class-converter
还将其包装为
Angular使用:
angular-json-class-converter
将该对象原样传递给类构造函数;没有约定或检查
interface iPerson {
name: string;
age: number;
}
class Person {
constructor(private person: iPerson) { }
toString(): string {
return this.person.name + ' is ' + this.person.age;
}
}
// runs this as //
const object1 = { name: 'Watson1', age: 64 };
const object2 = { name: 'Watson2' }; // age is missing
const person1 = new Person(object1);
const person2 = new Person(object2 as iPerson); // now matches constructor
console.log(person1.toString()) // Watson1 is 64
console.log(person2.toString()) // Watson2 is undefined
您可以使用此npm软件包。https://www.npmjs.com/package/class-converter
易于使用,例如:
class UserModel {
@property('i')
id: number;
@property('n')
name: string;
}
const userRaw = {
i: 1234,
n: 'name',
};
// use toClass to convert plain object to class
const userModel = toClass(userRaw, UserModel);
// you will get a class, just like below one
// const userModel = {
// id: 1234,
// name: 'name',
// }
我个人觉得这很令人震惊,因为打字稿不允许端点定义指定所接收对象的类型。看起来确实是这样,我将用其他语言来做,就是将JSON对象与类定义分开,并且让类定义使用JSON对象作为其唯一的数据成员。 。
我鄙视样板代码,因此对我来说通常是在保留类型的同时以最少的代码量获得所需结果的问题。
考虑以下JSON对象结构定义-这些将是您在端点上收到的内容,它们仅是结构定义,没有方法。
interface IAddress {
street: string;
city: string;
state: string;
zip: string;
}
interface IPerson {
name: string;
address: IAddress;
}
如果我们以面向对象的术语来考虑以上内容,则上述接口不是类,因为它们仅定义了数据结构。OO术语中的类定义数据和对其进行操作的代码。
因此,我们现在定义一个用于指定数据和对其进行操作的代码的类。
class Person {
person: IPerson;
constructor(person: IPerson) {
this.person = person;
}
// accessors
getName(): string {
return person.name;
}
getAddress(): IAddress {
return person.address;
}
// You could write a generic getter for any value in person,
// no matter how deep, by accepting a variable number of string params
// methods
distanceFrom(address: IAddress): float {
// Calculate distance from the passed address to this persons IAddress
return 0.0;
}
}
现在,我们可以简单地传入任何符合IPerson结构的对象,然后继续前进...
Person person = new Person({
name: "persons name",
address: {
street: "A street address",
city: "a city",
state: "a state",
zip: "A zipcode"
}
});
现在,我们可以用相同的方式处理在您的端点接收到的对象,方法类似于...
Person person = new Person(req.body); // As in an object received via a POST call
person.distanceFrom({ street: "Some street address", etc.});
这具有更高的性能,并使用了一半的数据复制内存,同时大大减少了您必须为每种实体类型编写的样板代码的数量。它仅依赖于TypeScript提供的类型安全性。
使用'as'声明:
const data = JSON.parse(response.data) as MyClass;
我在这里使用了这个库:https : //github.com/pleerock/class-transformer
<script lang="ts">
import { plainToClass } from 'class-transformer';
</script>
实现方式:
private async getClassTypeValue() {
const value = await plainToClass(ProductNewsItem, JSON.parse(response.data));
}
有时,您必须解析plainToClass的JSON值以了解它是JSON格式的数据
我在前端使用Angular 6,在后端使用Spring Boot应用程序,该应用程序返回Java对象。我需要做的就是在Angular应用程序上定义一个具有匹配属性的类似类,然后我可以接受对象“ as”为一个Angular类对象(在下面的示例中为Company)。
例如,请参阅下面的前端代码。如果有什么需要进一步说明的,请在评论中让我知道。
createCompany() {
let company = new Company();
company.name = this.companyName;
this.companyService.createCompany(company).subscribe(comp => {
if (comp !== null) {
this.employerAdminCompany = comp as Company;
}
});
}
其中company是spring boot app中的实体对象,也是Angular中的类。
export class Company {
public id: number;
public name: string;
public owner: User;
public locations: Array<Location>;
}