typescriptangular

Proper way to declare JSON object in Typescript


I have the following JSON object in my Angular 2 app and would like to know what is the proper what to declare it in typescript.

data = [
  {
    'id':1,
    'title':'something'
    'node': [
              {
              'id':1,
              'title':'something'
              'node': []
              }
            ]
  },
  {
    'id':2,
    'title':'something'
    'node': [
              {
              'id':1,
              'title':'something'
              'node': []
              }
            ]
  }
]

Solution

  • Here is an easy and naive implementation of what you're asking for:

    interface IDataNode {
        id: number;
        title: string;
        node: Array<IDataNode>;
    }
    

    If you want to instantiate said nodes from code:

    class DataNode implements IDataNode {
        id: number;
        title: string;
        node: Array<IDataNode>;
    
        constructor(id: number, title: string, node?: Array<IDataNode>) {
            this.id = id;
            this.title = title;
            this.node = node || [];
        }
    
        addNode(node: IDataNode): void {
            this.node.push(node);
        }
    }
    

    Using this to hardcode your structure:

    let data: Array<IDataNode> = [ 
        new DataNode(1, 'something', [
            new DataNode(2, 'something inner'),
            new DataNode(3, 'something more')
        ]),
        new DataNode(4, 'sibling 1'),
        new DataNode(5, 'sibling 2', [
            new DataNode(6, 'child'),
            new DataNode(7, 'another child', [
                new DataNode(8, 'even deeper nested')
            ])
        ])
    ];