Proper way to declare JSON object in Typescript

Question

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': []
              }
            ]
  }
]

It would be better for me to say this is a Javascript object. — Per Larsen
– Per Larsen, Commented Jun 30, 2016 at 13:05

Maximilian Riegler · Accepted Answer · 2016-06-30 13:15:58Z

29

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')
        ])
    ])
];

edited Jun 30, 2016 at 13:15

answered Jun 30, 2016 at 12:40

Maximilian Riegler

23.6k4 gold badges65 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

toskv Over a year ago

you might want to make the node property in the interface an array as well. :)

Alcruz Over a year ago

Hello @rinukkusu if the data came from json, you didn't even need to declare a class, you can parse the json and define a contract with the interface, thats the beauty of typescript.

Maximilian Riegler Over a year ago

Yes, that's right. That's why I said "instantiate"! :)

Per Larsen Over a year ago

I like this answer. But, lets say I just want to hard code to data in my component. I understand this is not the right way to do things. I'm just curious.

Alcruz Over a year ago

@rinukkusu, Yes sorry, I didn't see that part.

|

hkong · Accepted Answer · 2021-07-26 19:19:36Z

Update: 7/26/2021

I revisited the discussion noted in the original answer, and there is now an update with an improved implementation.

type JSONValue = 
 | string
 | number
 | boolean
 | null
 | JSONValue[]
 | {[key: string]: JSONValue}

interface JSONObject {
  [k: string]: JSONValue
}
interface JSONArray extends Array<JSONValue> {}

This has been working very well for me.

Discussion reference: https://github.com/microsoft/TypeScript/issues/1897#issuecomment-822032151

Original answer: Sep 29 '20

I realize this is an old question, but I just found a solution that worked very well for me. Declare the following

type JsonPrimitive = string | number | boolean | null
interface JsonMap extends Record<string, JsonPrimitive | JsonArray | JsonMap> {}
interface JsonArray extends Array<JsonPrimitive | JsonArray | JsonMap> {}
type Json = JsonPrimitive | JsonMap | JsonArray

then any of the following (including the OP's version slightly modified for syntax errors) will work

    let a: Json = {};
    
    a[1] = 5;
    a["abc"] = "abc";
    a = {
      a: {
        a: 2,
      },
      b: [1, 2, 3],
      c: true,
    };
    a = [
      {
        "id": 1,
        "title": "something",
        "node": [
          {
            "id": 1,
            "title": "something",
            "node": [],
          },
        ],
      },
      {
        "id": 2,
        "title": "something",
        "node": [
          {
            "id": 1,
            "title": "something",
            "node": [],
          },
        ],
      },
    ];

This answer should be credited to Andrew Kaiser who made the suggestion on the discussion about making Json a basic type in Typescript: https://github.com/microsoft/TypeScript/issues/1897#issuecomment-648484759

I didn't try your solution because some people have stated problems with it, but +1 for linking to the discussion.

Alcruz · Accepted Answer · 2016-06-30 12:38:41Z

6

The proper way is using an interface, it doesn't generate extra code when compiled to javascript and it offers you static typing capabilities:

https://www.typescriptlang.org/docs/handbook/interfaces.html

answered Jun 30, 2016 at 12:38

Alcruz

5485 silver badges12 bronze badges

Comments

Piotr Wojciechowski · Accepted Answer · 2024-02-21 15:11:03Z

1

type JsonValue = string | number | boolean | null;
type JsonArray = Array<JsonValue | JsonObject>;
interface JsonObject {
    [key: string]: JsonValue | JsonObject | JsonArray;
}

answered Feb 21, 2024 at 15:11

Piotr Wojciechowski

412 bronze badges

2 Comments

Wojciech Tomczyk Over a year ago

Add Json type as union of all types you've defined. Json is not just an object, but array or primitive too.

Piotr Wojciechowski Over a year ago

@WojciechTomczyk you are right, according to the JSON RFC 7159 (datatracker.ietf.org/doc/html/rfc7159) the arrays and primitives are proper jsons

Jean Claveau · Accepted Answer · 2025-08-13 11:32:57Z

0

This kind of types are so generic that they should belong to an external tested lib.

So most widespread, for what I know, having these types is type-fest

answered Aug 13 at 11:32

Jean Claveau

1,4912 gold badges16 silver badges17 bronze badges

Collectives™ on Stack Overflow

Proper way to declare JSON object in Typescript

5 Answers 5

7 Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related