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

Angular 2: Multiple instances in the same Application

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

Create a simple Messageboard with Firebase and Angular4

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

Nested Component - Passing Data to a Parent Component

In my previous article Nested Component - Passing Data to a Child Component , I explained how to pass data from a parent component to a child component. In this article I will describe how you do the other way, passing data from a child to a parent component. As you know, there is a decorator called @Input for passing data to the child, and of course there is another decorator to passing the data to the parent. This decorator is called @Output. Very obvious. So we have to import this decorator to your parent component import { Output } from '@angular/core' ; Now we can use this decorator. The property type of the decorator must be an event. The data to pass becomes the event payload. So we have to import the EventEmitter, too, because in Angular an event is defined with an EventEmitter object. import { Output , EventEmitter } from '@angular/core' ; Next step is to create a new instance of th...

Talk About Code

Search This Blog