Deserializing concrete types from an abstract list in TypeScript (serialized in JSON.NET)

Question

Deserializing concrete types from an abstract list in TypeScript (serialized in JSON.NET)

I'm working with an API that returns an object containing a list of various concrete types that share a common base. Is there a way to automate the process of mapping these items to a specific Typescript interface model-type without having to manually map each one?

Is it possible to leverage the "$type" property that JSON.NET includes in the JSON object and automatically map it to a Typescript interface/model instance? Or is there another method that doesn't involve manual mapping?

Note: In my case, the .NET class namespace is removed during serialization from the API for client requests (e.g. { $type: 'Foo' } instead of { $type: 'MyApp.Models.Foo' })

typescript json.net

Answer 1

Answer №1

If you are in need of class instances instead of plain objects, then you must traverse the object tree using reflection and recursively deserialize it.

Here is a basic outline:

class Person
{
    name: string;

    log()
    {
        console.log("Name: " + this.name);
    }
}

class Employee
{
    age: number;

    log()
    {
        console.log("Age: " + this.age);
    }
}

class DataObject
{
    items: (Person | Employee)[];
}

/** Type mappings. */
const types = {
    "DataObject": DataObject,
    "Person": Person,
    "Employee": Employee
};

const deserialize = <R = any>(instance: { $type: string }): R =>
{
    // Create instance of the class.
    const ctor = types[instance.$type];
    const obj = new ctor();

    // Assign/deserialize all properties of the object.
    for (const key in instance)
    {
        const val = instance[key];
        if (val == null)
        {
            obj[key] = val;
        }
        else
        {
            if (typeof val.$type == 'string')
                obj[key] = deserialize(val);
            else if (Array.isArray(val))
                obj[key] = val.map(item => item == null ? item : deserialize(item));
            else
                obj[key] = val; // Might be some standard type 🤷
        }
    }

    return obj;
}

const jsonData = {
    $type: 'DataObject',
    items: [
        { $type: "Person", name: "Alice" },
        { $type: "Employee", age: 30 },
    ]
};
const testObj = deserialize<DataObject>(jsonData);

testObj.items.forEach(item => item.log());

This will output correctly:

Name: Alice
Age: 30

Answer 2

If you are in need of class instances instead of plain objects, then you must traverse the object tree using reflection and recursively deserialize it.

Here is a basic outline:

class Person
{
    name: string;

    log()
    {
        console.log("Name: " + this.name);
    }
}

class Employee
{
    age: number;

    log()
    {
        console.log("Age: " + this.age);
    }
}

class DataObject
{
    items: (Person | Employee)[];
}

/** Type mappings. */
const types = {
    "DataObject": DataObject,
    "Person": Person,
    "Employee": Employee
};

const deserialize = <R = any>(instance: { $type: string }): R =>
{
    // Create instance of the class.
    const ctor = types[instance.$type];
    const obj = new ctor();

    // Assign/deserialize all properties of the object.
    for (const key in instance)
    {
        const val = instance[key];
        if (val == null)
        {
            obj[key] = val;
        }
        else
        {
            if (typeof val.$type == 'string')
                obj[key] = deserialize(val);
            else if (Array.isArray(val))
                obj[key] = val.map(item => item == null ? item : deserialize(item));
            else
                obj[key] = val; // Might be some standard type 🤷
        }
    }

    return obj;
}

const jsonData = {
    $type: 'DataObject',
    items: [
        { $type: "Person", name: "Alice" },
        { $type: "Employee", age: 30 },
    ]
};
const testObj = deserialize<DataObject>(jsonData);

testObj.items.forEach(item => item.log());

This will output correctly:

Name: Alice
Age: 30

Deserializing concrete types from an abstract list in TypeScript (serialized in JSON.NET)

Answer №1

Similar questions

When using TypeScript, it is important to ensure that the type of the Get and Set accessors for properties returning a

A powerful trio: Axios, Typescript, and Promises

What is the trick to accessing an object's key and value when you are unsure of the object's

Understanding the attribute types in Typescript React

Having trouble executing the project using Gulp

Tips on showcasing an array as a matrix with a neat line property

The onClick function for a button is not functioning properly when using the useToggle hook

Guide to exporting (and using) JSDoc annotations in TypeScript NPM packages

Is there a way in Typescript to filter for the first instance of a unique object in an array of objects?

Retrieve the value of "this" dynamically in Typescript using a string variable

Use leaflet.js in next js to conceal the remainder of the map surrounding the country

Removing a targeted element from an array in Angular

The parameter type '(value: any) => any[]' does not match the expected parameter type 'string[]'

What is the reason `addEventListener` does not work with a class method?

Can components be SSGed individually rather than entire pages?

Tips for tuning a MatTable in angular without using a filterPredicate

Ways to ensure that when changes occur in one component, another component is also updated

Activate the event when the radio button is changed

Cease the animated loading icon once the template has finished loading in sync with the async pipe

Generating a type definition from a JavaScript file