将字典 JSON 转换为 Typescript 模型

Question

I want to convert following json object to Typescript Interface for type safety :

    {
      "attributes1": {
        "myKey1": {
          "myinnerKey11": {
            "value": "value 1",
            "name": "name 1"
          },
          "myinnerKey12": {
            "value": "value 1",
            "name": "name 1",
            "otherKey": "key 2"
          }
        }
      },
      "attributes2": {
        "myKey2": {
          "myinnerKey21": {
            "value": "value 1",
            "name": "name 1"
          },
          "myinnerKey22": {
            "value": "value 1",
            "name": "name 1",
            "otherKey": "key 2"
          }
        }
      }
    }

i tried creating the following interface :

    export interface IFinalObj {
        attributes1: IAttributes1;
        attributes2: IAttributes2;
    }
    interface IMyInnerObj {
        value: string;
        name: string;
        otherKey?: string;
    }
    interface IDynamicInnerKey {
        [a: string]: IMyInnerObj
    }

    interface IAttributes1 {
        myKey1: IDynamicInnerKey;
    }
    interface IAttributes2 {
        myKey2: IDynamicInnerKey;
    }

I'm not sure what to do when the Keys value will be changed and new objects get added

Answer 1

It seems like you need the Record<T1, T2> interface but if you're looking to generate typings from data, then yes, http://json2ts.com/ is the best tool.

I wrote a poor version of that and tested with your model:

interface ITest {
  attributes1: {
    myKey1: {
      myinnerKey11: {
        value: string,
        name: string
      },
      myinnerKey12: {
        value: string,
        name: string,
        otherKey: string
      }
    }
  },
  attributes2: {
    myKey2: {
      myinnerKey21: {
        value: string,
        name: string
      },
      myinnerKey22: {
        value: string,
        name: string,
        otherKey: string
      }
    }
  }
}

You can try it here https://json2dts.stackblitz.io/ and the source code is at https://stackblitz.com/edit/json2dts .

As you can see, it is very simplistic and does not try to pattern match at all.