complex json typescript typing

Question

I struggle to understand why typescript is not happy with the typing of my json:

const myjson = { 
    "cube": {
        "points":
            [[-100, -100, -100],
             [ 100, -100, -100],
            ],
        "triangles":
            [[0,1,2,"rgba(255,255,127,0.3)"],
             [2,3,0,"rgba(255,255,127,0.3)"]
            ]
    },
    "pyramid": {
        "points":
            [[   0, -100,    0],
             [ 100,  100, -100],
            ],
        "triangles":
            [[0,1,2,"rgba(255,255,127,0.3)"],
             [0,2,3,"rgba(0,255,127,0.3)"],
            ]
    }
}

interface Data3D {
    [k: string]: {
    points: number[][];
    triangles: [number, number, number, string][];
  }
}

const make3D = (jsondata: Data3D) => {
    console.log(jsondata);
}

make3D(myjson);

Typescript complains about the triangles type:

Types of property 'triangles' are incompatible.
        Type '(string | number)[][]' is not assignable to type '[number, number, number, string][]'.
          Type '(string | number)[]' is not assignable to type '[number, number, number, string]'.
            Target requires 4 element(s) but source may have fewer.(2345)

I type using a custom type [number, number, number string] but Typescript reports it could have fewer elements ?

if I change the type of triangles to :

triangles: (number | string)[][];

it works.

why can't I type it more precisely like that ? :

triangles: [number, number, number, string][];

JSON is a text representation of some data structure. There isn't any JSON in your question, just a JavaScript object and some variables whose names are misleading. — axiac
– axiac, Commented Oct 30, 2021 at 12:21
@axiac whether it's a JSON or not is not relevant, my question is about the typings. I simplified the source code, but in my real code I'm importing json from a file, and the content of the file is what is here named as myjson. — aestheticsData
– aestheticsData, Commented Oct 30, 2021 at 12:34

Nishant · Accepted Answer · 2021-10-30 12:58:48Z

1

When you say,

const myjson = { 
    "cube": {
        "points":
            [[-100, -100, -100],
             [ 100, -100, -100],
            ],
        "triangles":
            [[0,1,2,"rgba(255,255,127,0.3)"],
             [2,3,0,"rgba(255,255,127,0.3)"]
            ]
    },
    "pyramid": {
        "points":
            [[   0, -100,    0],
             [ 100,  100, -100],
            ],
        "triangles":
            [[0,1,2,"rgba(255,255,127,0.3)"],
             [0,2,3,"rgba(0,255,127,0.3)"],
            ]
    }
};

const cubeTriangle = myjson.cube.triangles[0];
// infers as 
// const cubeTriangle: (string | number)[]

myjson.cube.triangles[number] gets inferred as (string | number)[], which is the most logical inference for a random JSON. Typescript does not know that it is Data3D it is looking at. So, you need to explicitly tell TS that the JSON is in fact Data3D

const myjson: Data3D = { 
    cube: {
        points:
            [[-100, -100, -100],
             [ 100, -100, -100],
            ],
        triangles:
            [[0,1,2,"rgba(255,255,127,0.3)"] ,
             [2,3,0,"rgba(255,255,127,0.3)"],
            ]
    },
    pyramid: {
        points:
            [[   0, -100,    0],
             [ 100,  100, -100],
            ],
        triangles:
            [[0,1,2,"rgba(255,255,127,0.3)"],
             [0,2,3,"rgba(0,255,127,0.3)"],
            ]
    }
};

const cubeTriangle = myjson.cube.triangles[0];
// const cubeTriangle: TriangleTuple
// if you don't create an TriangleTuple type
// it would say 
// const cubeTriangle: [number, number, number, string]
// I just like to keep readability high

type TriangleTuple = [number, number, number, string];

TS Playground: https://tsplay.dev/WGk3JW

edited Oct 30, 2021 at 12:58

answered Oct 30, 2021 at 12:51

Nishant

56.1k13 gold badges119 silver badges131 bronze badges

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

2 Comments

aestheticsData Over a year ago

I was adding like you explain the tuple [number, number, number, string], so the problem was indeed that my object was no typed with Data3D. Thank you.

Nishant Over a year ago

@aestheticsData -- Please consider marking this answer correct and upvote it if you liked the effort. Here is the stackoverflow etiquette on accepting answers.

Collectives™ on Stack Overflow

complex json typescript typing

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related