Skip to main content

Typescript: json2ts is a nice helper

Von
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.



Labels:

Comments

Post a Comment

Popular posts from this blog

Download a file with Angular2+ and FileSaver.js

Von
Why should your Angular code download a file? Of course your webserver can deliver files and you can just add a simple link to your website but what if the file is delivered by a webservice and the webservice requests authentication (i.e. OAuth) to protect the file from unauthorized access? In this case you might have the requirement to download the file in your code and then tell the browser to save it to the hard disk. How to do that?   First of all you need to add filesaver.js to your project.  npm install file-saver --save ..and add the typings npm install @types/file-saver --save-dev More information about filesaver you can find on the filesaver github pages . To download the file via http you need to implement a service. The following imports are required: import  {  Injectable  }  from   '@angular/core' ; import  {  Http ,  Response ,  RequestOptions ,  ResponseContentType  }  from   ...
Post a Comment
Read more

Angular 2: Multiple instances in the same Application

Von
Requirement:  Use multiple Root-Components in the same Application  This Root-Components use the same Implementations and Services Display the Root-Components on the same Single-Page Solution: App-Module preparation: import { BrowserModule, DOCUMENT } from '@angular/platform-browser'; import { NgModule, Inject, Component } from '@angular/core'; export class AppModule { private browser_document; ngDoBootstrap(appRef){ if(this.browser_document.getElementsByTagName('app-root1').length > 0){appRef.bootstrap(AppComponent1);} if(this.browser_document.getElementsByTagName('app-root2').length > 0){appRef.bootstrap(AppComponent2);} } constructor(@Inject(DOCUMENT) private document: any){ this.browser_document = document; } } Service preparation: Angular 2 has two options to provide a service. 1. Single instance For a multiple implementation of more Root-Components we need the second opt...
Post a Comment
Read more