我从远程REST服务器读取了一个JSON对象。这个JSON对象具有typescript类的所有属性(根据设计)。我如何转换收到的JSON对象的类型var?
我不想填充一个typescript变量(即有一个构造函数,以这个JSON对象)。它很大,在子对象和属性之间复制所有内容将花费大量时间。
更新:你可以将它转换为typescript接口!
我从远程REST服务器读取了一个JSON对象。这个JSON对象具有typescript类的所有属性(根据设计)。我如何转换收到的JSON对象的类型var?
我不想填充一个typescript变量(即有一个构造函数,以这个JSON对象)。它很大,在子对象和属性之间复制所有内容将花费大量时间。
更新:你可以将它转换为typescript接口!
当前回答
使用从接口扩展的类。
然后:
Object.assign(
new ToWhat(),
what
)
和最好的:
Object.assign(
new ToWhat(),
<IDataInterface>what
)
ToWhat成为DataInterface的控制器
其他回答
这是一个老问题,答案基本正确,但不是很有效。我的建议是:
创建一个基类,其中包含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() { }
}
类似的机制(使用assign())已经在@Adam111p的帖子中提到过。只是另一种(更完整的)方法。@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);
}
}
}
现在我们可以强制转换从service检索到的对象:
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;
}
}
用法变得非常简单;创建Area服务:
@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(); }
}
就我个人而言,typescript不允许指定端点定义是令人震惊的 接收到的对象的类型。看来情况确实如此, 我会做我对其他语言做过的事情,那就是我将JSON对象从类定义中分离出来, 并让类定义使用JSON对象作为其唯一的数据成员。
我不喜欢样板代码,所以对我来说,这通常是在保留类型的同时用最少的代码得到想要的结果。
考虑以下JSON对象结构定义——这些将是您在端点处接收到的内容,它们只是结构定义,没有方法。
interface IAddress {
street: string;
city: string;
state: string;
zip: string;
}
interface IPerson {
name: string;
address: IAddress;
}
如果我们用面向对象的术语来考虑上面的内容,那么上面的接口就不是类,因为它们只定义了一个数据结构。 面向对象术语中的类定义了数据和对其进行操作的代码。
因此,我们现在定义了一个类,它指定数据和对其进行操作的代码……
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提供的类型安全性。
你不能简单地将Ajax请求的原始JavaScript结果转换为典型的JavaScript/TypeScript类实例。有许多技术可以做到这一点,通常涉及到复制数据。除非创建类的实例,否则它不会有任何方法或属性。它仍然是一个简单的JavaScript对象。
而如果你只处理数据,你可以只做一个转换到一个接口(因为它是一个纯粹的编译时结构),这将需要你使用一个TypeScript类,它使用数据实例并对该数据执行操作。
一些复制数据的例子:
将AJAX JSON对象复制到现有对象 在JavaScript中将JSON字符串解析为特定对象原型
本质上,你只需要:
var d = new MyRichObject();
d.copyInto(jsonResult);
我在这里使用这个库: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格式的数据
如果你需要将json对象转换为typescript类,并在结果对象中使用它的实例方法,你需要使用object。setPrototypeOf,就像我在下面的代码片段中所做的那样:
Object.setPrototypeOf(jsonObject, YourTypescriptClass.prototype)