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

Create a simple Messageboard with Firebase and Angular4

Von
You want that your users can leave messages in your Angular Application. In this Article I explain how you can implement this with Angular 4 and Firebase. First we have to import the Moduls for Firebase in our app.module.ts and our component. app.module.ts import  {  AngularFireModule  }  from   'angularfire2' ; import  {  AngularFireDatabaseModule ,  AngularFireDatabase ,  FirebaseListObservable  }  from   'angularfire2/database' ; @ NgModule ({    declarations:  [      AppComponent   ],    imports:  [      BrowserModule ,      FormsModule ,      HttpModule ,      AngularFireModule . initializeApp ( firebaseConfig ),      AngularFireDatabaseModule , We also have to configure the AngularFireModule. export   const   fireba...
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