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

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

Social Login with Angular 4 and FireBase

There is a way to let users use there social logins to get access to Firebase. But how do you implement this login to your Angular 4 project. In this article I will tell you how to set up your Firebase database and how do you implement social login to your angular project. Set up Firebase First we have to get our database ready. In your Firebase Console you will find Authentication in the left navigation bar. At the tab Sign-In Method you can enable different sign in methods. In our example we will enable Google and Facebook, as it's the most commend social login methods these days. The Google Login will be configured automatically. When you enable Facebook Login you need an App ID and an App Secret. You will get these when you register yourself as a developer at Facebook. You can read how you can do that at the Facebook Site . I will not explain you that in detail because it's very easy. If we done, it's time to set up our Angular4 code. Install Ang...

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

Talk About Code

Search This Blog