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

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

Nested Component - Passing Data to a Child Component

Von
If you want to pass data to a nested component you have to use the @Import decorator. You can find this decorator at @angular/core import  {  Input  }  from   '@angular/core' ; Now I show you how you can use this decorator. In my example I want to pass a counter from a Shopping List to a Shopping Basket Component In the end, the shopping basket should look like this: The Shopping Basket shows the number of items in an array (Shopping List). Everytime we put an item in the basket we count the items in the array this . counter  =  this . selectedProducts . length Now we have to pass the counter to the ShoppingBasketComponent by using property binding < app-shopping-basket  [ count ]= "counter" ></ app-shopping-basket > After this we can use the input decorator at the child component export   class   ShoppingBasketComponent   implements   OnInit  { @ Input ()  count ...
Post a Comment
Read more