打字稿中的装饰器语法

Question

我不明白关于下一个代码的大部分内容（它来自 typescript 手册）：

function classDecorator<T extends { new (...args: any[]): {} }>(
  constructor: T
) {
  return class extends constructor {
    newProperty = "new property";
    hello = "override";
  };
}

@classDecorator
class Greeter {
  property = "property";
  hello: string;
  constructor(m: string) {
    this.hello = m;
  }
}

console.log(new Greeter("world"));

为什么在 <T extends { new (...args: any[]): {} }> 中，T 扩展了一个“对象”？ T到底延伸的是什么？

为什么该函数返回扩展构造函数的 class？我很困惑，这两天我一直在努力理解。谢谢

Answer 1

在JavaScript中，class是构造函数，也就是说，class是一个对象，你可以new.

在 class 定义中定义构造函数的语法实际上并不是定义 class 的成员，它只是一种指定参数的方式，并且可以选择在有组织的方式。

new 关键字早于 ES2015 class 语法大约二十年，在引入之前“classes”被写为

function Greeter(m: string) { }

并使用 new Greeter("hi") 实例化。

也就是说，您编写了一个构造函数，这就是 class 曾经并且基本上仍然是。

在 ES2015 中添加 class 语法时，它在很大程度上被设计为现有构造函数模式的更具声明性的语法糖。

现在，有了这个背景，我们就可以切入您的问题了。

T 上的约束说它必须是构造函数，那是可以 newed 的东西，那是 class.

这种类型可以在 TypeScript 中以多种方式编写

如示例所示：

{ new (...args: any[]): {} }

描述了一个可以用 new 调用的对象，传递零个或多个参数，即 class，这是一个构造函数。

为了清楚起见，将其与可以在没有 new

的情况下调用的对象类型进行比较

{ (...args: any[]): {} }

上面描述了一个无需 new 即可调用的对象，传递零个或多个参数，它是一个函数。

在现代 TypeScript 中，通常首选替代语法，因为它更简洁、更具表现力

new (...args: any[]) => {}

对于class/constructor和

(...args: any[]) => {}

对于函数。

至于装饰器的 return 值，它利用 class 装饰器的功能将 class 本身替换为另一个 class。 Class 装饰器可以修改他们的目标，或者，正如我们在本例中看到的那样，将其替换为我的 return 一个新的 class.

打字稿中的装饰器语法

Decorators syntax in typescript

javascript

decorator

typescript