ES6 equivalent of this Angular 2 typescript

Question

I have this typescript and I want to write the ES6 equivalent. I'm learning angular 2 and would prefer to use ES6 over typescript, and all the samples are in either ES5 or typescript. If I see how this code is written in ES6 then I should be able to take it from there with any new code I need to write based off of typescript. Cheers.

'use strict';
import {Component, bootstrap} from 'angular2/angular2';

// Annotation section
@Component({
  selector: 'my-app',
  template: '<h1>Hello {{ name }}</h1>'
})
// Component controller
class MyApp {
  constructor() {
    this.name = 'Max';
  }
}

Answer 1

ES6 equivalent of your code is in this plunk . I've changed your code a little bit by adding a service to demonstrate a parameters property (see below).

Explanation

I think you don't know how to convert decorators and types into ES6.

1. To replace class decorators (such as Component and Directive ) add annotation property to a component . You can use static getter for this:

    class App { static get annotations() { return [ new Component({ selector: 'my-app', template: '<h1>Hello, {{ name }}</h1>', providers: [Service] }) ]; } // ... } // or just add `annotation` after class declaration App.annotations = [ new Component({ selector: 'my-app', // ... }) ]; 

2. To replace parameter decorators (such as @Inject ) and types ( constructor(type: Type) ) add parameters property to a component. Again you can use static getter for this:

    class App { // ... static get parameters() { return [[Service]]; } constructor(service) { this.name = service.getName(); setTimeout(() => this.name = 'Max', 1000); } } // or just add `parameters` after class declaration App.parameters = [[Service]]; 

Answer 2

Decorators (eg @Component ) are an active EcmaScript 7 proposal . You can see the “equivalent” ES6 code by compiling your code with the TypeScript compiler and looking at the output:

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Component, bootstrap } from 'angular2/angular2';
// Annotation section
let MyApp = class {
    constructor() {
        this.name = 'Max';
    }
};
MyApp = __decorate([
    Component({
        selector: 'my-app',
        template: '<h1>Hello {{ name }}</h1>'
    })
], MyApp);

A slightly cleaned up, but not 100% equivalent to TypeScript output, would be:

import { Component, bootstrap } from 'angular2/angular2';
// Annotation section
let MyApp = class {
    constructor() {
        this.name = 'Max';
    }
};
MyApp = Component({
    selector: 'my-app',
    template: '<h1>Hello {{ name }}</h1>'
})(MyApp) || MyApp;

Of course since all of this is still just at the proposal phase, it is possible that the syntax or semantics of decorators will change in the future, so you can't necessarily rely on them working this way forever.

(Please also note that a 'use strict' pragma inside an ES6 module makes no sense; all code inside ES6 modules already runs in strict mode per the specification.)