DEV Community

Cover image for JSON to TypeScript in less than 1 second!
Remo H. Jansen
Remo H. Jansen

Posted on

JSON to TypeScript in less than 1 second!

Imagine that you are trying to integrate an HTTP API with a TypeScript client. Sometimes, SDKs and documentation are available, but other times, you are in the dark.

Let's imagine that we are fetching the following JSON file:

https://gist.githubusercontent.com/robertcedwards/8574169/raw/90c2d25d3ad5fd0b5f3a56b523e409ce7e0e9480/sample_nested.json
Enter fullscreen mode Exit fullscreen mode

The URL above returns the following JSON:

{ 
    "coffee": {
        "region": [
            {"id":1,"name":"John Doe"},
            {"id":2,"name":"Don Joeh"}
        ],
        "country": {"id":2,"company":"ACME"}
    }, 
    "brewing": {
        "region": [
            {"id":1,"name":"John Doe"},
            {"id":2,"name":"Don Joeh"}
        ],
        "country": {"id":2,"company":"ACME"}
    }


}
Enter fullscreen mode Exit fullscreen mode

Having to write TypeScript type definitions by hand for a JSON response like this can be time-consuming, this is why I have released a command line utility to save some time. You can call it using npx as follows:

npx dts-from-json <URL>
Enter fullscreen mode Exit fullscreen mode

You just need to replace <URL> with a URL that returns a JSON response:

npx dts-from-json https://gist.githubusercontent.com/robertcedwards/8574169/raw/90c2d25d3ad5fd0b5f3a56b523e409ce7e0e9480/sample_nested.json
Enter fullscreen mode Exit fullscreen mode

In less than 1 second, you will see the following in your terminal:

interface SampleNested {
  coffee: Coffee;
  brewing: Coffee;
}
interface Coffee {
  region: Region[];
  country: Country;
}
interface Country {
  id: number;
  company: string;
}
interface Region {
  id: number;
  name: string;
}
Enter fullscreen mode Exit fullscreen mode

If you wish to save the file, you just need to redirect stdout to a file:

npx dts-fromjson <URL> > types.d.ts
Enter fullscreen mode Exit fullscreen mode

Here are a few JSON files that you can use to test it:

You can also use local files by passing a path instead of a URL:

npx dts-fromjson <local-path-to-json-file>
Enter fullscreen mode Exit fullscreen mode

The dts-from-json module is available at npm. While this tool might not be perfect it can definitely save you some time.

I hope you enjoy it 🤓 Thanks for reading 💛

Top comments (0)