json2ts – Convert a JSON object to a TypeScript interface… from the console

json2ts – Convert a JSON object to a TypeScript interface… from the console

If you use TypeScript regularly, you want to be typesafe. Always. Also with the JSON files that come from your backend.

Did you search “JSON to typescript” before?

I know. I know. You search for it just to copy the JSON and paste the interfaces back to your code. Wouldn’t be awesome to just type json2ts(your_json) into the console?

With the json2ts plugin, you can convert a JSON object to TypeScipt interfaces directly from the console.

Just type re.json2ts(yourJsonData) and it will print the interfaces and copy the relative code into the clipboard.

Convert a JSON object to TypeScript interfaces

The result is automatically copied into the clipboard, ready to be pasted into your IDE.

Use case: HTTP JSON response to TypeScript interface

Often the developer needs to extract the interfaces from a backend response.

You can do this by:

  1. Click on the request in the Network panel
  2. Right click on the response (in the Preview tab)
  3. Select Store as variable from the menu
  4. type re.json2ts(temp1) into the console

Thanks to Gregor Biswanger

The code of this plugin was adapted from
https://github.com/GregorBiswanger/json2ts

This plugin is open-source

You can find the plugin at

https://github.com/redevtools/redevtools/tree/main/plugins/

How to install this plugin

To use this plugin, you just need redevtools installed (npm install redevtools + redevtools.init() in your code ). See the docs for more info about how to install redevtools.


Like this plugin? Share with the community:

Tweet Reddit