前言

在 JavaScript 中，装饰器是一种修改类、方法、属性或参数的功能。在ES6/ES7之前，JavaScript并没有内置装饰器的直接支持，但可以通过一些模式和语法来模拟实现装饰器的行为。

但是，从 ECMAScript 2015 (ES6) 开始，JavaScript 引入了装饰器提案，并在后续版本中逐渐加以完善，但目前装饰器在 JavaScript 中并未被完全正式地纳入标准，需要额外的配置或者编译工具（如Babel）来使用。

JavaScript中实现

代码地址：https://gitee.com/programmer-su-xiaopang/bytedance/tree/master/前端实现装饰器/JavaScript 程序员苏小胖/ 今日头条 - Gitee.com

请注意，JavaScript 装饰器的语法和行为可能因不同的工具链和 JavaScript 版本而异。在使用装饰器时，需要确保你的开发环境和工具链支持装饰器的语法及相应的配置。

当前，由于 JavaScript 标准尚未完全确定装饰器的规范，因此可能会有变化。建议在使用装饰器时查阅最新的文档和工具链支持情况。

安装依赖

yarn add -D @babel/plugin-proposal-decorators

配置 Babel 配置文件（通常是 .babelrc 或 babel.config.js）

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ]
}

测试实例

// 定义一个装饰器函数
function log(target, name, descriptor) {
  const original = descriptor.value;
  
  descriptor.value = function(...args) {
    console.log(`Calling ${name} with arguments: ${args}`);
    return original.apply(this, args);
  };

  return descriptor;
}

class MyClass {
  @log
  myMethod(arg1, arg2) {
    return arg1 + arg2;
  }
}

const instance = new MyClass();
console.log(instance.myMethod(2, 3)); // 这将会打印日志并输出 5

TypeScript中实现

代码地址：https://gitee.com/programmer-su-xiaopang/bytedance/tree/master/前端实现装饰器/TypeScript 程序员苏小胖/ 今日头条 - Gitee.com

安装依赖

 yarn add -D typescript@lastest
// 本实例在以下版本运行正常
// yarn add -D typescript@5.3.3
// yarn add -D typescript@4.5

初始化TS配置

npx tsc --init
// 执行后会初始化tsconfig.json
// 由于装饰器当前为试验性质需要开启
在tsconfig.json中搜索"experimentalDecorators": true, 并取消注释，否则会报如下错误

$ npx tsc
src/decorators.ts:13:5 - error TS1241: Unable to resolve signature of method decorator when called as an expression.
  The runtime will invoke the decorator with 2 arguments, but the decorator expects 3.

13     @log
       ~~~~

  src/decorators.ts:1:41
    1 function log(target: any, name: string, descriptor: PropertyDescriptor) {
                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    An argument for 'descriptor' was not provided.

src/decorators.ts:13:6 - error TS1270: Decorator function return type 'PropertyDescriptor' is not assignable to type 'void | ((arg1: number, arg2: number) => number)'.

13     @log
        ~~~


Found 2 errors in the same file, starting at: src/decorators.ts:13

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

测试实例

function log(target: any, name: string, descriptor: PropertyDescriptor) {
  const original = descriptor.value;

  descriptor.value = function(...args: any[]) {
    console.log(`Calling ${name} with arguments: ${args}`);
    return original.apply(this, args);
  };

  return descriptor;
}

class MyClass {
  @log
  myMethod(arg1: number, arg2: number) {
    return arg1 + arg2;
  }
}

const instance = new MyClass();
console.log(instance.myMethod(2, 3)); // 这将会打印日志并输出 5

// 运行测试
npx tsc decorators.ts

Nodejs中实现

TypeScript 有良好的装饰器支持，并且在编译时能够将装饰器转换为普通的 JavaScript 代码，以便 Node.js 可以执行。

除了 TypeScript，你也可以使用 Babel，如上实例中在 JavaScript 中使用装饰器一样，通过 Babel 插件来处理和转换装饰器的语法。

相关文档

• TypeScript 装饰器https://www.tslang.cn/docs/handbook/decorators.html装饰器 · TypeScript中文网 · TypeScript——JavaScript的超集
• TypeScript 中的元数据以及 reflect-metadata 实现原理分析 https://zhuanlan.zhihu.com/p/643674031TypeScript 中的元数据以及 reflect-metadata 实现原理分析 - 知乎
• 【简单易懂】 Reflect Metadata - TypeScript 元数据的理解与使用 https://juejin.cn/post/7062237525561049119Reflect Metadata - TypeScript 元数据的理解与使用 - 掘金