DEV Community

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

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

Ankit Tanna on September 07, 2021

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 co...
Collapse
 
lolmaus profile image
Andrey Mikhaylov (lolmaus)

Thanks!

PS You forgot null. 😬

Collapse
 
csandman profile image
Christopher Sandvik

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!

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

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

Collapse
 
piotrlewandowski profile image
Piotr Lewandowski • 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.

Collapse
 
shuckster profile image
Conan

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.

Thread Thread
 
piotrlewandowski profile image
Piotr Lewandowski

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

Collapse
 
ankittanna profile image
Ankit Tanna

You don't realise the potential of typescript.

Good luck resolving console error messages and run time errors 😂

Collapse
 
yadimon profile image
Dmitry Gorelenkov

how to access a deep property with this types? like
myJsonObj.subObj1.hisProperty gives me an error in typescript 4.x?

Collapse
 
anentropic profile image
anentropic

JSON also has null

Collapse
 
hengwujun128 profile image
martin Trump

Nice! a wonderful answer!

Collapse
 
ankittanna profile image
Ankit Tanna

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

Collapse
 
franzzemen profile image
Franz Zemen

Thanks. Useful for toJSON() implementations.