将 JSON 优化为 Typescript Map

Question

I'm passing an object from Java to Typescript that has "Map" properties. My typescript models are described by interfaces, not classes:

export interface Foo {
    bar: Map<string, Bar>;
    mapOfBar: Map<string, Map<string, Bar>>;
}

export interface Bar {
    someField: string;
}

I wrote code to query and convert the JSON object to Foo:

import {HttpClient} from '@angular/common/http';
...
export class FooService {
    constructor(private http: HttpClient) {
    }

    getFoo(): Observable<Foo> {
        return this.http.get<Foo>('/some/route/to/FooEndpoint');
    }    
}

This returns me the object, but bar and mapOfBar are of type object, not Map . So after quite a bit of searching the internet I came up with this code:

    getFoo(): Observable<Foo> {
        return this.http
            .get<Foo>('/some/route/to/FooEndpoint')
            .pipe(
                map((res: Foo) => {
                    res.bar = new Map(Object.entries(res.bar));

                    let actualMapOfBar = new Map(Object.entries(res.mapOfBar));
                    res.mapOfBar = new Map();
                    for (let [key, bar] of actualMapOfBar) {
                        res.mapOfBar.set(key, new Map(Object.entries(bar)));
                    }

                    return res;
                })
            );
    }

This returns me bar and mapOfBar as Maps, which is great.

Call me a perfectionist, but somehow this feels clunky and wrong:

• The line map((res: Foo) => { indicates that res is already implementing the Foo interface, but it doesn't - it only contains the properties, but not the correct types (yet).
• This is quite a bit of conversion logic to set up, especially when dealing with deeply nested object trees.

Is there no easier way to implement this or can this be optimised? Is there ideally some "automagical" way of using the Typescript interface to convert the object?

(Angular 9.1, Typescript 3.8, rxjs 6.5)

EDIT: This is an example response return by the endpoint:

{"bar":{"key1":{"someField":"A"},"key2":{"someField":"B"},"key3":{"someField":"C"}},"mapOfBar":{"A":{"key1":{"someField":"A"},"key2":{"someField":"B"},"key3":{"someField":"C"}},"B":{"key1":{"someField":"A"},"key2":{"someField":"B"},"key3":{"someField":"C"}},"C":{"key1":{"someField":"A"},"key2":{"someField":"B"},"key3":{"someField":"C"}}}}

Answer 1

No there is not. The line map((res: Foo) is -you- telling the compiler: "hey, this is of type 'Foo'", and the compiler accepts this, because he trusts you. However, you lied to the compiler, because the response of the API is just a plain JSON object. This cannot includes Map or any other class.

Like I said before, there is no automatic way to do the conversion. You will have to do this yourself. Which means, to make it type safe, you should have two interfaces. One being the FooResponse and one into which you want this Foo to be converted to. The reason this does not exist, is because TypeScript types only exist at compile time. During runtime, so when you digest the API, the types are lost, and so is your information for conversion. That's why you have to do it manually.

A small question. Why do you want them to be maps? Besides some relatively convenient API, you can also just keep it as the object it is, and change your typing to:

export interface Foo {
    bar: Record<string, Bar>;
    mapOfBar: Record<string, Record<string, Bar>>;
}

export interface Bar {
    someField: string;
}

Answer 2

Is there no easier way to implement this or can this be optimised? Is there ideally some "automagical" way of using the Typescript interface to convert the object?

Yes, it is! It's called tapi.js - it's a lightweight automapper to/from JSON data.

npm i -D tapi.js

Then you can map your object in a number of ways, namely:

let typedObject = new YourClass().fromJSON(jsonData);

Or, more simply, you can map the contents of a promise like so:

http.YOUR_REQUEST_CODE_HERE
    .as(YourClass)
    .[then/pipe/whatever](typedObject => { ... })

You can read the docs for more info.