DEV Community

Cover image for Building a JSON to Typescript converter with React, NodeJS and ChatGPT πŸš€

Building a JSON to Typescript converter with React, NodeJS and ChatGPT πŸš€

Nevo David on March 13, 2023

TL;DR In this article, you'll learn how to build a web application that converts JSON objects to Typescript interfaces using the ChatGPT...
Collapse
 
empe profile image
Emil Pearce

Awesome article! Learning how to use the ChatGPT API to convert JSON to Typescript interfaces is super helpful. This will save a ton of time for devs who work with APIs a lot. The step-by-step instructions are easy to follow, even for beginners. And the integration with the web app is seamless. Overall, this article is an excellent resource for anyone who wants to speed up their dev process. Thanks for sharing!

Collapse
 
nevodavid profile image
Nevo David

Thank you so much Emil! πŸš€

Collapse
 
devmehta profile image
Dev Mehta

Overall this comment seems to be written by chatgpt

Collapse
 
cwtuan profile image
Comment deleted
Collapse
 
jimmy1995 profile image
Jitendra • Edited

Hi @cwtuan, I found another good online tool to convert JSON to typescript. Which also provides some extra features like repairing broken JSON (Only for minor issues in JSON), formatting JSON, and converting JSON files to typescript, etc.

Collapse
 
sachinchaurasiya profile image
Sachin Chaurasiya

This is really great write up πŸ‘ŒπŸ», thanks for sharing it.

Collapse
 
nevodavid profile image
Nevo David

Thank you Sachin!

Collapse
 
ryzorbent profile image
Thabo

const prompt = Convert the JSON object into Typescript interfaces \n ${value} Please, I need the only the code, I don't need any explanations.;

I guess it will work, even through in your prompt you said 'I need the only the code'

Nice and simple approach.

Collapse
 
johtso profile image
Johannes

Couldn't you also validate the output of chatgpt by checking that the object conforms to the type using typescript? You could even feed the type error into chatgpt to see if it can fix it with a second attempt

Collapse
 
qm3ster profile image
Mihail Malo

Thank you for writing my comment for me!

Collapse
 
vladyslavparashchenko profile image
VladyslavParashchenko

You can do the same without any AI and it will be more reliable and cheaper

Collapse
 
codeofrelevancy profile image
Code of Relevancy

Perfect use of ChatGPT. Great job..

Collapse
 
greglockwood profile image
Greg Lockwood

Cool idea and well explained.

One small suggestion: you should also clear the loading flag in the error handler, not just when it succeeds. And you might need an error state and component as well.