javascript - ES6 相当于这个 Angular 2 typescript

Question

我有这个 typescript ，我想编写 ES6 的等效内容。我正在学习 Angular 2，并且更喜欢使用 ES6 而不是 TypeScript，并且所有示例都使用 ES5 或 TypeScript。如果我看到这段代码是如何用 ES6 编写的，那么我应该能够从那里使用我需要基于 typescript 编写的任何新代码。干杯。

'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 等效项位于 this plunk 中。我通过添加一个服务来演示 参数 属性，对您的代码进行了一些更改(见下文)。

说明

我认为你不知道如何将装饰器和类型转换为 ES6。

1. 要替换类装饰器(例如 Component 和 Directive)，请向组件添加 annotation 属性。您可以使用静态 getter为此:

   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. 要替换参数装饰器(例如 @Inject)和类型(constructor(type: Type))，请添加 parameters 属性到一个组件。您再次可以使用 static getter为此:

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