TypeScript: 类的装饰器(二)

最新推荐文章于 2025-05-19 15:45:38 发布

原创最新推荐文章于 2025-05-19 15:45:38 发布 · 286 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #node.js #typescript #es6

本文深入探讨TypeScript中类装饰器的执行时机与顺序，揭示其与类实例化无关，仅在编译阶段运行的特性，以及多个装饰器从下至上依次执行的规律。

类的装饰器执行时机

接上文，我们引出了 TypeScript 类的装饰器后，接下来，去挖掘下它的特性

PS：上文，TypeScript: 类的装饰器(一)

先写一小段类的装饰器的代码：

function addDecorator(constructor: any) {
  console.log("add decorator");
}

@addDecorator
class Test {}

const t: Test = new Test();

此时运行：npm run dev

那么，我们在加多一个Test的实例：

function addDecorator(constructor: any) {
  console.log("add decorator");
}

@addDecorator
class Test {}

const t: Test = new Test();
const t1: Test = new Test();

此时运行：npm run dev

是不是，类的装饰器只会在第一个实例化后执行一次？我们把Test类的实例去掉，代码变为如下：

function addDecorator(constructor: any) {
  console.log("add decorator");
}

@addDecorator
class Test {}

此时运行：npm run dev

由此可见，类的装饰器执行和实例化无关，它在程序编译的时候就运行了

类的装饰器执行顺序

我们再加一个装饰器，代码变为如下：

function addDecorator(constructor: any) {
  console.log("add decorator");
}

function addNextDecorator(constructor: any) {
  console.log("add next decorator");
}

@addDecorator
@addNextDecorator
class Test {}