TypeScript 5非静态属性装饰器签名是什么？参数类型为何？

核心背景 #

你当前使用的是TypeScript 5默认启用的TC39标准装饰器，而非旧版实验性装饰器——因为你的tsconfig.json中没有开启"experimentalDecorators": true，这是理解参数差异的关键。

参数类型与第一个参数为undefined的原因 #

针对非静态实例属性的装饰器，TC39标准定义的签名如下：

type ClassFieldDecorator = (
  value: undefined,
  context: ClassFieldDecoratorContext
) => void | ((initialValue: unknown) => unknown);

1. 第一个参数：undefined
   这是标准装饰器的设计规则：实例属性装饰器在类的定义阶段执行，此时还没有任何类实例被创建，无法传入实例或类原型（旧版实验性装饰器会传入类原型，这是两者核心差异之一）。因此标准中固定将实例属性装饰器的第一个参数设为undefined，用来明确区分这是实例属性的装饰场景（静态属性装饰器的第一个参数会传入类的构造函数）。

2. 第二个参数：ClassFieldDecoratorContext
   这个参数是包含属性元数据的上下文对象，核心属性包括：

   • name: 属性的名称（字符串或Symbol类型）
   • static: 布尔值，标记该属性是否为静态属性
   • private: 布尔值，标记该属性是否为私有属性
   • addInitializer: 用于添加实例初始化阶段执行的函数（可以在这里处理实例属性的逻辑，比如响应式绑定）

适配标准装饰器的代码示例 #

你可以给装饰器添加正确的类型定义，更清晰地使用上下文参数：

export default function VueReactiveDataField(
  _: undefined,
  context: ClassFieldDecoratorContext
): void {
  console.log(`要装饰的属性名: ${String(context.name)}`);
  console.log(`是否为静态属性: ${context.static}`);

  // 添加实例初始化逻辑，这里的this指向创建后的类实例
  context.addInitializer(function () {
    console.log(`实例初始化时处理属性: ${this[context.name]}`);
    // 在这里可以实现Vue响应式绑定的逻辑
  });
}

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD