Generate Typescript Interfaces from JSON

Photo by Ines Álvarez Fdez on Unsplash

Scenario

We’ve setup a 20 second JSON REST server:

3 2 1 JSON Server

Now we want typescript interfaces for the JSON objects it returns.

Approach

Use:

http://www.json2ts.com

With the following JSON:

{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}

We get these interfaces:

declare module namespace {
export interface Post {
        id: number;
        title: string;
        author: string;
    }
export interface Comment {
        id: number;
        body: string;
        postId: number;
    }
export interface Profile {
        name: string;
    }
export interface RootObject {
        posts: Post[];
        comments: Comment[];
        profile: Profile;
    }
}

VSCode Tooling

json2ts