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';
  }
}

For everyone who would come here to know how to convert Angular2 typescript to JavaScript, here's a handy guide from Angular2 cookbook: angular.io/docs/ts/latest/cookbook/ts-to-js.html. Note that the examples are TS to ES5. — sampathsris
– sampathsris, Commented Oct 26, 2016 at 11:21

alexpods · Accepted Answer · 2016-01-02 09:04:12Z

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.

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',
    // ...
  })
];

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]];

Note for people like me: though dependencies like that Service above get wrapped in their own array, OpaqueTokens do not. Now I know...

C Snover · Accepted Answer · 2016-01-02 03:22:29Z

Decorators (e.g. @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.)

Collectives™ on Stack Overflow

ES6 equivalent of this Angular 2 typescript

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related