Typescript parse json with class and interface

Question

I am trying to create a Post class containing message attributes such as "id, title, content ... etc.

I want to initialize a class from a JSON response. I use angular -http to get JSON in typescript

in 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); }); } } 

Note: I'm still confused about which type is correct for my JSON. I read that typescript does not support Map , but it works here as result: {[key:string]: string; }; result: {[key:string]: string; };

I tried looking at stackoverflow, I found this question how to pass a json object to typescript , the answer has nothing to do with typescript.

in another question Can I create a typescript type and use it when AJAX returns JSON data?

the answer is about creating interfaces in typescript. (which I did not quite understand).

I also found this site for json2ts to create typescript interfaces from JSON, so I tried my json and I got this:

 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; } } 

Now I have a typescript interface for my JSON, but I don't know what to do next!

Q: Is this the correct JSON parsing for a class object in typescript? if so, what is the next step to get the data initialized class?

Answer 1

You should definitely use interfaces to describe your DTO (Data Transfer Object). It seems that json2ts did a great job of describing the JSON structure. Now, since the http service created the object for you, you don’t need to create a new one ... you only need to pass it to your interface, something like the following lines:

 class AppComponent { dataFromServer : RootObject; http.get('http://localhost/wptest/wp-json/wp/v2/posts').subscribe(res => { this.dataFromServer = <RootObject>res.json(); }); } 

From now on, TypeScript will protect you from errors when you try to access any data coming from the server. For instance:

 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.