How to create a type for complex JSON object in TypeScript?

#typescript #javascript #node #json

Imagine having to deal with a complex JSON object and still having TypeScript typecheck in place. The complex objects cause us to use any in the code in order to navigate around the Typecheck of TypeScript.

Sometimes, we may also have to turn off the linter rules in order to make this work.

// eslint-disable-next-line @typescript-eslint/no-explicit-any

private modifyRecord(record: any) {...}

We can define our custom types like below:

type JSONValue =
    | string
    | number
    | boolean
    | JSONObject
    | JSONArray;

interface JSONObject {
    [x: string]: JSONValue;
}

interface JSONArray extends Array<JSONValue> { }

These kind of type is known as Recursive Type Aliases. After TypeScript 3.7 we can also define it in a confined way:

type JSONValue =
    | string
    | number
    | boolean
    | { [x: string]: JSONValue }
    | Array<JSONValue>;

JSONValue circularly references itself.

Happy coding!

PS: Don't use any in the TypeScript.

Top comments (12)

Andrey Mikhaylov (lolmaus) • Dec 22 '21

Thanks!

PS You forgot null. 😬

Christopher Sandvik • Jun 18 '22

If you're hitting an external API (without using someting like tRPC) your best bet is to do schema validation at runtime. You can always just assert that the values coming back match a structure you define as an interface, but if the endpoints change, you might not realize until your app starts breaking.

The tool I've seen to do this is zod. It's TS first approach lets you define a schema, and validate your data against it, and the data it returns will either throw an error if the structure is wrong, or return the data already statically typed.

No assuming the data is structured how you expect it, instead checking the structure and applying an interface all in one go!

Jon Randy 🎖️ • Sep 7 '21 • Edited

I just don't get it. Just use plain JS and stop creating more work for yourself 😉

Piotr Lewandowski • Sep 7 '21 • Edited

You kinda replied to yourself: you just don't get it. Taking care of the quality of your work is not "creating more work" - it's making sure you don't have to put work to fix your half-arsed code in the future.

Conan • Sep 7 '21

Come now, both of you. Just because you DO type your code doesn't mean you necessarily increase it's quality, and just because you DON'T type your code doesn't mean you're saving yourself from extra work.

Piotr Lewandowski • Sep 7 '21

I don't type all of my code (as in not in every project I work on), but when I have the opportunity to use TS it definitely helps me to catch errors earlier. So yeah, I'd say it does help to increase quality, especially when you work in a team, TS helps to keep consistency on the codebase. Also refactoring: so much easier with TS!
Disclaimer: I still sometimes swear at TS because I'm still learning it :) Just this week I invented at least 5 new swearwords in at least 2 languages I speak ;)