How can I cast JSON to a complex object using Typescript and Angular

Question

I have a JavaScript function that creates a style object in my Typescript class. My project is using Angular version 5:

private createCircle(parameters: any): any {        
    return new Circle({
        radius: parameters.radius,
        snapToPixel: parameters.snapToPixel,
        fill: new Fill(parameters.fill),
        stroke: new Stroke(parameters.stroke)
    });
}

Circle, Fill and Stroke are third party library classes. And function parameter (parameters) is a JSON object like this:

    {
        "radius": 10,
        "snapToPixel": true,
        "fill": {
            "color": "rgba(255, 255, 0, 0.4)"
        },
        "stroke": {
            "color": "red",
            "width": 1,
            "lineDash": null,
            "lineCap": "round",
            "lineJoin": "round",
            "miterLimit": 10
        }
    }

Can I cast this JSON object to a Circle class directly? (Circle, Fill and Stroke should be created using the new keyword)

latest TS versions generate typings out of well-structured json document on the fly — Daniel Khoroshko
– Daniel Khoroshko, Commented Aug 5, 2018 at 10:46

smnbbrv · Accepted Answer · 2018-08-05 11:30:17Z

No, you cannot do that in TypeScript directly yet; for your particular use-case it will never be possible because none of the compilers can understand your particular intentions in that particular moment without proper configuration.

Still, if you want the magic to happen, there are libraries that can help. E.g. one of them is so called Type-aware-JSON. This allows you to define the classes using a set of decorators and then they could be deserialized right from the JSON file and then serialized back using the same metadata. In your particular scenario, when the classes come from the 3rd party the only option I see is to extend all of them and proxy each property with ta decorators on each property.

However, romanticless factory function would be way more efficient. Write a recursive function that goes through each object and make it react on each property; another solution is again to extend each class and make them accept normal JSON structure while still creating the parent class object by calling super().

Mattijs · Accepted Answer · 2018-08-05 11:16:03Z

It is unclear to me where you get the JSON from, but I assume from a service call? If so, you are very likely already returning JSON from you service. If not (xml?), you would have to convert it.

So when you call your createCircle function and pass in your parameters payload, it should create your circle as long as all keys you are referring to (radius, fill, stroke, snapToPixel) are available.

You mention casting, so I am assuming parameters is a JSON string? Probably not if it is coming from a service, then it should just be a javascript object (Dictionary) which will have the same shape. If for some reason get a JSON String in, you would have to call const param = JSON.parse( parameters ); first to parse the JSON to an Object.

Anyway, I am doing a lot of assumptions, hope there is something helpful in my answer.

Collectives™ on Stack Overflow

How can I cast JSON to a complex object using Typescript and Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related