Skip to main content

Typescript: json2ts is a nice helper

Writing interfaces can be annoying.

You can save a lot of time when you have to define Typescript interfaces for data that you are loading from a webservice. 
Instead of typing all the interfaces yourself you can just use a nice service in the web: json2ts

Just paste in your json code and it generates the corresponding interfaces in Typescripts.

Example JSON:

[
  { 
    "city": "Berlin",
    "country": "Germany",
    "currencies": [{"code":"EUR"}]
  },
  { 
    "city": "Paris",
    "country": "France",
    "currencies": [{"code":"EUR"}]
  }

]

Generated code:


declare module namespace {

    export interface Currency {
        code: string;
    }

    export interface RootObject {
        city: string;
        country: string;
        currencies: Currency[];
    }

}


Now you just have to rename the 'RootObject' to a name you like.

Check it out here: http://json2ts.com/

For the case you need c# code try this http://json2csharp.com/. Both services are based on the JSON C# Class Generator.

Thanks to Timmy Kokke and Jonathan Keith for giving that to the community.



Comments

Popular posts from this blog

Utilize 3rd party Javascript libraries in your Angular 2+ application with CLI

Not everything is available as a native Typescript library. Due to that sometimes you might need to use 3rd party libraries. After creating a new project with Angular CLI you will experience that VS Code does not know any libraries you have imported in the header tag and the compiler complains when you try to use this libraries. The reason is: You are missing the typings. The typings describe the functionality of the libary and make that available in your project through intellisense and for the compiler. But before you start creating your own typings do the following checks: 1. Does the vendor of the library provide the typings? If yes, install through npm 2. Are the typings available on definitely typed ? If yes, then take it from there. If this is not the case then you can do your own typings. If you want to do that properly, then you should write the complete set of typings for the library and upload to definitely typed to provide it for the community. OK, this might b...

How to implement a search field in Angular X that starts some action as soon as you stop typing

Everybody knows the Google search that displays some recommendations while you are typing. Some times when you are developing an application you might need a similar functionality for implementing a kind of free text search to quickly find results in a long list of data stored in a database that might be filtered and delivered by a webservice in the background.  The requirement: The search should happen without clicking a button but it should not start right after each single character you have typed. It should wait a short moment and after you have stopped typing immediately start the search. The implementation is quite simple and the same way you could do that in Javascript. First we need to prepare our template to have an input field in which the user can type in a search string.  Whenever the user types a character a function should be called. This is done with the keyup event. (keyup)="searchChanged($event)" In our component we have to defin...