/ 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

Progress Telerik Developer Expert. Course author with students in 110+ countries. BSc (Hons) Computer Science @ UoS. Google accredited Mobile Site professional.

Read More