JSON对象到Typescript类

Question

I need some help in creating typescript classes for below source JSON format.

There could be multiple groups, fields or action within Control array. At this point i am struggling to create typescript class representation out of below format.I am think of classes as group, field and action and make controls array to be of type any and then based on object name like group, field or action i have to create instance of corresponding class. Is this right way of doing it or do anyone has better approach.

{
    "controls": [
        {
            "group": {
                "name": "Building",
                "maximum": "*",
                "minimum": "0",
                "rows": [
                    {
                        "id": "b8D7D15B8029E4909B322719EBAC448B8",
                        "controls": [
                            {
                                "field": {
                                    "name": "BuildingDescription",
                                    "value": "Buidling#1-123 Street",
                                    "reference": "b8D7D15B8029E4909B322719EBAC448B8",
                                    "product": "Product1",
                                    "caption": "BuildingDescription",
                                    "dataType": "string",
                                    "controlType": "text",
                                    "format": "",
                                    "maxLength": "0",
                                    "readOnly": "1",
                                    "hidden": "0",
                                    "required": "0"
                                }
                            }
                        ]
                    }
                ]
            }
        },
         {
            "field": {
                "name": "AccountName",
                "value": "",
                "reference": "a22AF4E5BE8BA4649A528E4FF7EAEC2C2",
                "product": "Product1",
                "caption": "AccountName",
                "dataType": "string",
                "controlType": "text",
                "format": "",
                "maxLength": "50",
                "readOnly": "0",
                "hidden": "0",
                "required": "0"
            }
        },
        {
            "action": {
                "id": "Account_3D",
                "description": "",
                "caption": "ViewAccount",
                "contentType": "application/json",
                "hidden": "0",
                "methods": [
                    {
                        "index": 0,
                        "type": "PUT",
                        "pageSet": "PagesetAccount",
                        "page": "Account",
                        "uri": "http: //server/pageSets/PagesetAccount/pages/Account.json"
                    },
                    {
                        "index": 1,
                        "type": "GET",
                        "pageSet": "PagesetAccount",
                        "page": "Account",
                        "uri": "http: //server/pageSets/PagesetAccount/pages/Account.json?command=view"
                    }
                ]
            }
        }
    ]
}

Any help would be much appreciated!

Answer 1

You can use

// strict
type A = {
    controls: [
        {
            group: {
                name: string,
                maximum: string,
                minimum: string,
                rows: [
                    {
                        id: string,
                        controls: [
                            {
                                field: {
                                    name: string,
                                    value: string,
                                    reference: string,
                                    product: string,
                                    caption: string,
                                    dataType: string,
                                    controlType: string,
                                    format: string,
                                    maxLength: string,
                                    readOnly: string,
                                    hidden: string,
                                    required: string,
                                }
                            }
                        ]
                    }
                ]
            }
        },
        {
            field: {
                name: string,
                value: string,
                reference: string,
                product: string,
                caption: string,
                dataType: string,
                controlType: string,
                format: string,
                maxLength: string,
                readOnly: string,
                hidden: string,
                required: string,
            }
        },
        {
            action: {
                id: string,
                description: string,
                caption: string,
                contentType: string,
                hidden: string,
                methods: Array<{
                    index: number,
                    type: string,
                    pageSet: string,
                    page: string,
                    uri: string,
                }>
            }
        }
    ]
}

or

// quite strict
type B = {
    controls: Array<Record<string, Record<string, string | number | Array<Record<string, string | number | Array<Record<string, Record<string, string>>>>>>>>
};

or

// Readable
type C = { controls: Array<object> };

You can use interface instead of type, or class as well