ng.core.Component(...).Class 不是函数

Question

我使用的是 Angular 2 的 ES5 风格。因此，我没有使用装饰器，而是定义如下模板：

var someComponent = ng.core.Component({
    // component configuration
}).Class({
    // component class
});

工作正常。最近我升级到 Angular 5，现在我对相同的代码有这些错误：

ng.core.Pipe(...).Class 不是函数
ng.core.Component(...).Class> 不是函数
ng.core.Directive(...).Class 不是函数

我应该如何在 Angular 5 中更改它？

Answer 1

JavaScript 目前被认为是二等公民（没有双关语），而 TypeScript 是首选语言，主要是因为专注于 AOT 编译，它仅适用于 TypeScript。

正如here 解释的那样，

不能再以这种格式声明类。

Component({...}).
Class({
  constructor: function() {...}
})

这种格式只适用于 JIT 和 ES5。这种模式不 允许像 Webpack 这样的构建工具来处理和优化代码，这 导致令人望而却步的大捆绑。我们正在删除此 API 因为我们正在努力通过以下方式确保每个人都走上快车道 默认，使用 ES5 无法进入快速路径 DSL。替换是使用TypeScript和@Decorator格式。

@Component({...})
class {
  constructor() {...}
}

如this answer 中所述，在普通 ES5 及更高版本中，装饰器的替代方法是使用 annotations 和 parameters 静态属性对类（以及函数）进行注释。

所以

var SomeComponent = ng.core.Component({...})
.Class({
  constructor: [
    [new ng.core.Inject(Svc)],
    function (svc) {...}
  ],
  foo: function () {...}
});

变成

SomeComponent.annotations = [new ng.core.Component(...)];
SomeComponent.parameters = [
  [new ng.core.Inject(Svc)]
];
function SomeComponent(svc) {...}
SomeComponent.prototype.foo = function () {...};

作为Class 功能的替代品，任何第三方实用程序类库都可用于在 ES5 中引入语法糖和继承来替代函数，例如uberproto 或 inherits。

强烈建议将现有的 Angular JavaScript 应用程序迁移到 TypeScript，后者在 AOT 编译模式下提供卓越的性能和更小的应用程序占用空间，这将是未来版本的默认模式。