Babel装饰器与TypeScript装饰器是否表现一致？

嘿，这个问题问到点子上了——虽然TypeScript和Babel都支持装饰器，但它们的实现逻辑和行为并不完全一致，核心差异源于二者最初遵循的装饰器规范版本不同，以及各自的工具链特性。我来给你拆解清楚：

1. 首先看规范版本的差异 #

装饰器提案经历了多个Stage阶段，TS和Babel在支持的默认规范上有过不同步：

• TypeScript：早期默认启用的是旧Stage 2装饰器（需要在tsconfig.json里设置experimentalDecorators: true）。从TypeScript 5.0开始，官方支持了新的Stage 3装饰器规范，但需要关闭experimentalDecorators，同时开启useDefineForClassFields: true才能启用。
• Babel：默认支持的是Stage 3规范；如果要兼容旧的Stage 2装饰器，需要安装@babel/plugin-proposal-decorators并配置legacy: true。

2. 核心行为差异 #

类方法/字段装饰器的参数与逻辑 #

• 旧Stage 2模式（TS默认、Babel legacy）：
  装饰器函数接收三个参数：目标对象、属性名、属性描述符，直接作用于属性的定义本身。比如方法装饰器可以直接修改描述符的value来包装原方法：

  function Log(target: any, key: string, desc: PropertyDescriptor) {
    const original = desc.value;
    desc.value = function(...args: any[]) {
      console.log(`Calling ${key} with args:`, args);
      return original.apply(this, args);
    };
  }
  
  class Demo {
    @Log
    sayHi(name: string) { return `Hi ${name}`; }
  }
  

• Stage 3模式（Babel默认、TS新配置）：
  装饰器函数接收两个参数：被装饰的值、上下文对象（包含kind、name等元信息）。你需要根据context.kind判断是装饰方法、字段还是类，再返回修改后的逻辑：

  function Log(value: any, context: { kind: string; name: string }) {
    if (context.kind === "method") {
      return function(...args: any[]) {
        console.log(`Calling ${context.name} with args:`, args);
        return value.apply(this, args);
      };
    }
    return value;
  }
  
  class Demo {
    @Log
    sayHi(name: string) { return `Hi ${name}`; }
  }
  

类装饰器的处理 #

• 旧Stage 2模式：类装饰器直接接收类的构造函数作为参数，返回的新构造函数会完全替代原类，或者修改原构造函数的原型链。
• Stage 3模式：类装饰器接收类本身和上下文对象，返回的新类会被使用，逻辑更符合ES规范，且上下文会明确标记kind: "class"。

执行顺序 #

• 旧Stage 2模式（TS）：装饰器执行顺序是属性装饰器 → 方法装饰器 → 类装饰器，同一类内的装饰器按从上到下的顺序执行。
• Stage 3模式：执行顺序有明确的规范（静态成员先于实例成员，方法/字段按定义顺序执行，类装饰器最后），此时TS和Babel的执行逻辑基本一致，但和旧模式差异明显。

元数据支持 #

• TypeScript可以直接结合reflect-metadata库使用@Reflect.metadata来添加元数据，旧装饰器模式下支持得很顺畅。
• Babel要支持元数据，需要额外安装@babel/plugin-proposal-metadata，并和装饰器插件配合使用，部分场景下的元数据处理逻辑和TS略有差异。

总结 #

如果你的TS和Babel都使用Stage 3规范（TS关闭experimentalDecorators，Babel默认配置），二者的装饰器表现会非常接近；如果TS用旧的Stage 2、Babel开启legacy: true，行为也会对齐，但和Stage 3模式差异很大。

所以关键是：确保二者使用的装饰器规范版本一致，这样才能保证表现相同。

内容的提问来源于stack exchange，提问作者A-yon Lee