我正在尝试创建一个类Post包含帖子属性,如“id,title,content …等.
我想从JSON响应初始化类.我正在使用angular-http来获取打字稿中的JSON
在APP.TS:
class AppComponent { result: { [key: string]: string; }; map: Map<Object,Object>; constructor(http: Http) { http.get('http://localhost/wptest/wp-json/wp/v2/posts').subscribe(res => { this.result = <any>res.json(); this.map = <any>res.json(); console.log(this.result); console.log(this.map); }); } }
注意:
我仍然感到困惑的是哪个是我的JSON的正确类型
我读过打字稿不支持Map,但是它在这里工作:{[key:string]:string; };
我试着查看stackoverflow,我发现这个问题how to cast a json object to a typescript,答案与打字稿无关.
在另一个问题Can I create a TypeScript type and use that when AJAX returns JSON data?
答案是谈论在打字稿中创建接口. (我不太明白.)
我还发现json2ts的这个站点从JSON生成了typescript接口,所以我尝试了我的json,我得到了这个:
declare module namespace { export interface Guid { rendered: string; } export interface Title { rendered: string; } export interface Content { rendered: string; } export interface Excerpt { rendered: string; } export interface Self { href: string; } export interface Collection { href: string; } export interface Author { embeddable: boolean; href: string; } export interface Reply { embeddable: boolean; href: string; } export interface VersionHistory { href: string; } export interface Links { self: Self[]; collection: Collection[]; author: Author[]; replies: Reply[]; } export interface RootObject { id: number; date: Date; guid: Guid; modified: Date; modified_gmt: Date; slug: string; type: string; link: string; title: Title; content: Content; excerpt: Excerpt; author: number; featured_image: number; comment_status: string; ping_status: string; sticky: boolean; format: string; _links: Links; } }
现在我的JSON有一个打字稿界面,但我不知道下一步该做什么!
问:这是将JSON解析为打字稿中的类对象的正确方法吗?如果是,使用数据初始化类的下一步是什么?
解决方法
您绝对应该使用接口来描述您的DTO(数据传输对象).
看起来json2ts在描述你的JSON结构方面做得很好.
现在,因为http服务为您创建了对象,所以您不必创建新对象…您只需将其强制转换为您的界面,如下所示:
看起来json2ts在描述你的JSON结构方面做得很好.
现在,因为http服务为您创建了对象,所以您不必创建新对象…您只需将其强制转换为您的界面,如下所示:
class AppComponent { dataFromServer : RootObject; http.get('http://localhost/wptest/wp-json/wp/v2/posts').subscribe(res => { this.dataFromServer = <RootObject>res.json(); }); }
从那时起,当您尝试访问来自服务器的任何数据时,TypeScript将防止您犯任何错误.例如:
this.dataFromServer.age = 45; // Error: age doesn't exist in the RootObject interface this.id = "Hello"; // Error,id was is a number,and you try to put string into it. this.id = 100; // will be just fine.