How to get the proper class during a cast from JSON in typescript?

Question

I have a very simple class

export class Foo {

    name: string;

    index: number;

    toFullString(): string {
        return `${this.name} | ${this.index}`;
    }
}

I get elements of this class from a server and cast json to this class:

.map(response => response.json() as Foo)

Now what happens is that after I call toFullString() method it fails since this is not the "real" Foo object as it would be in say C#.

So what is the proper way of achieving real Foo object, preferably without the need of writing your own constructors and so on.

The type safety in TypeScript is a joke sometimes really.

Possible duplicate of How do I cast a JSON object to a typescript class — chimmi
– chimmi, Commented Nov 9, 2016 at 16:03
Either you're going to have to write your own constructor or you'll have to take your returned obejcts and append the function (technically legal JS) with for(let obj of responseObjects) { obj['toFullString'] = function ... }. One you don't want, and the other is a little sketchy. — silentsod
– silentsod, Commented Nov 9, 2016 at 16:04
@chimmi this does not seem to be a duplicate. I already can cast, that's not the problem. The problem is that ordinary casting is not enough to get the "real" class... — Ilya Chernomordik
– Ilya Chernomordik, Commented Nov 9, 2016 at 18:55

silentsod · Accepted Answer · 2016-11-09 16:51:33Z

1

Either you're going to have to write your own constructor or you'll have to take your returned obejcts and append the function (technically legal JS) with for(let obj of responseObjects) { obj['toFullString'] = function ... }. One you don't want, and the other is a little sketchy.

The constructor method you have already seen but I'll repeat here:

constructor(public name, public index) {
    this.name = name;
    this.index = index;
}

You could also do it in the map which is the same thing.

masterFoo: Foo = new Foo();

mapFoo(responseObject: any) {
    <...>
    responseObject['toFullString'] = masterFoo.toFullString;
    <...>
  }

The auto mapping works for data objects only, and it's a limitation due to JS being the underlying language of it all.

Here's a plunker demonstrating appending the function to a Plain Old JavaScript Object: http://plnkr.co/edit/BBOthl0rzjfEq3UjD68I?p=preview

edited Nov 9, 2016 at 16:51

answered Nov 9, 2016 at 16:12

silentsod

8,35545 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ilya Chernomordik Over a year ago

That looks like quite hacky unfortunately, so I guess I'll stick with constructor or ordinary mapping if nothing better exists... Though I suppose there are some sort of AutoMapper for TypeScript.

Ploppy · Accepted Answer · 2016-11-09 16:06:00Z

1

You could create the Object and give it the JSON values.

.map(res => this.onResponse(res))

-

function onResponse(res:any){
    this.foo = new Foo();
    this.foo.name = res['name'];
    ...
}

Or give the JSON values to the constructor of Foo

this.foo = new Foo(res['name'], ...);

answered Nov 9, 2016 at 16:06

Ploppy

15.4k6 gold badges44 silver badges62 bronze badges

1 Comment

Ilya Chernomordik Over a year ago

Well, I wanted to avoid it, to do things automatically somehow. It's a lot of tedious work...

Collectives™ on Stack Overflow

How to get the proper class during a cast from JSON in typescript?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related