Typescript装饰器与类继承

Question

我有点被打字稿装饰者和他们如何解释.据说他们通过将元数据与它相关联来"装饰"一个类.我似乎无法理解元数据如何与类的实例相关联的概念.以角度2为例.

 @Component(
       {
          selector:...
       }
    ) 


    export class foo { ... }

目前我理解angular将实例化类foo并以某种方式将实例与装饰器的参数相关联,以便它可以提供服务,指令和模板.所有这些似乎也可以通过类继承来实现.如果我有一个Component类并让我的组件扩展该类,为什么不能有角度,然后提供这些参数,当它以与props做反应的方式引导时,并在这个使用场景中完全摆脱装饰器.

class Component { ... } //say this has members such as selector, services, directives, etc..

class Foo extends Component { ... }

然后你将使用它在bootstrap/runtime实例化它

new Foo(ElementName, Directives, Services, etc..)

通过反应,这在技术上是在引擎盖下进行的.您派生了组件并实现了它的方法.如果在实例化时需要传递信息,则传入props对象.

请赐教.

Answer 1

这段代码看起来确实很相似：

\n

import { Component } from \'@angular/core\';\nexport class AppComponent extends Component{ }\n

\n

对比：

\n

import { Component } from \'@angular/core\';\n@Component()\nexport class AppComponent { }\n

\n

你可以用不同的方式在 JS 中进行继承- 如果你选择使用Class 语法糖并想要使用extends实现继承的语法，那么你就被锁定了single inheritance- 所以每个类只能继承另一个类。

\n

使用@Decorators它可以将多个行为附加到一个类，从而创建与mixinsmultiple inheritance不同的东西。正如 G\xc3\xbcnter Z\xc3\xb6chbauer 指出的那样，装饰器更容易静态评估，而继承必须在运行时评估（即，如果编译器想知道特定子类有什么样的行为）。

\n

我将其视为@Decorators组合-因为它们基本上是函数，我将它们视为与高阶函数相同，所以这就像做类似的事情，但更具可读性：

\n

import { Component } from \'@functionalComponent/core\';\nlet myComponent = function() { return {hello: \'world\'}}\nlet AppComponent = Component(myComponent())\n

\n

不要忘记它Class本质上是纯 JS 对象，由构造函数创建/实例化。

\n

import { Component } from \'@constructedComponent/core\';\nlet MyComponent = function() {this.hello =\'world\'}\nlet AppComponent = new Component(new MyComponent)\n

\n

或者甚至“更低”并将其想象为纯粹的物体：

\n

import { Component } from \'@objectComponent/core\';\nlet MyComponent = {this.hello =\'world\'}\nlet AppComponent = Component.augment(MyComponent)\n

\n

一般来说，JS 的原型和函数性质非常强大，允许通过调用函数和更改对象来混合行为。当您切换到语法时，情况就会发生变化Class- 此时您应该坚持 OOP 设计原则，即“组合优于继承”，这decorators是一种用易于阅读的语法来表达组合的巧妙方法：

\n

复合模式和装饰模式的区别？

\n

来自维基百科：

\n

\n

装饰器的使用比子类化更有效，因为可以增强对象的行为而无需实例化全新的对象。

\n

\n

Answer 2

据我所知，主要原因是为了便于静态评估。通过继承，您需要执行 TS（或转译的 JS）代码来获取信息。

静态评估此元数据允许工具将其用于自动完成和模板中的所有类型的 lint 检查，以及构建设计器和其他工具，使构建 Angular 应用程序变得更容易。

离线模板编译器也利用此元数据。