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 (13)

Lou Cyx • Sep 7 '21 • Edited

If you want to have types based on a JSON you know (like an API response), you can use stuff like json2ts, and if you have that JSON in a file, you can just import it and use typeof:

import data from "./data.json";

export type JSONData = typeof data;

If the API has swagger support, there are several tools that generate types from swagger files such as openapi-typescript.

The generic approach in your post doesn't look that useful from my point of view, mainly because you'll have to do a bunch of type checking and type casting inside that function to make it work as expected, so even if you didn't used any, is almost like you did with extra steps.

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!

Lou Cyx • Jun 18 '22

io-ts is great for runtime validation as well, but my suggestion was mainly for when you have a static JSON you know, not a dynamic JSON response you don't. For those ideally you should have as you said an abstraction layer on top that does validations :)

Ankit Tanna • Sep 8 '21

I liked this portal until it stopped creating relevant interfaces. Only a human mind currently can understand good logical interface.

Andrey Mikhaylov (lolmaus) • Dec 22 '21

Thanks!

PS You forgot null. 😬

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