/ Visual Studio Code

Visual Studio Code Extension: JSON to TS

I've been working with some public APIs as part of an upcoming course, and I'm often finding that I have the structure of a response object, but no TypeScript interface. I'm happy to convert this manually (either fully or view model), but I'm always looking for fun ways to automate my workflow.

Using the JSON Placeholder as an example, let's look at a typical response object for /user/1:

json-to-ts-1

If we wanted to create our own model from this, it'd take a few minutes, and this doesn't count any mistype(s) or errors. Enter... JSON to TS!

This can either be used with the web client https://www.jsontots.com/ but for productivity reasons, I much prefer using the VS Code Extension.

To install the extension, hit up the marketplace with ext install json-to-ts and restart your editor. The same JSON data can then be pasted in with CTRL + ALT + V and a model will automatically be created:

json-to-ts-2

Tada! If you found this useful, I'd love to know what other Visual Studio Code extensions you're using in the comments section below or @PWHSoftware.

Paul Halliday

Paul Halliday

Developer Adocate at Doist. Author of Vue.js 2 Design Patterns and Best Practices. Course author with 22,000+ students.

Read More
Visual Studio Code Extension: JSON to TS
Share this

Subscribe to Paul Halliday