TypeScript为何用undefined覆盖属性装饰器？技术求助

我在开发类库时使用TypeScript装饰器，遇到了意外行为：用属性装饰器给类属性定义的getter/setter，会被构造函数覆盖成值为undefined的普通属性。按预期构造函数不该创建这个字段，因为装饰器已经把它设为getter，初始值是1，但实际实例化后属性变成了普通值属性。测试了TS 4.9.5和5.1.6版本，结果一致。

相关代码及tsconfig配置如下：

function description(target, key, title?: string) {
  const desc = Object.getOwnPropertyDescriptor(target, key);
  console.log(title ?? 'description', desc);
  return desc;
}

function FakeFactory<T = any>() {
  return function (target: any, propertyKey: any) {
    let _value: any = 1;

    description(target, propertyKey, 'before');
    // console.log: before undefined

    Object.defineProperty(target, propertyKey as string, {
      get() {
        return _value;
      },
      set(newValue: T) {
        _value = newValue;
      },
      enumerable: true,
      configurable: true,
    });

    description(target, propertyKey, 'after');
    // console.log: after 
    // { get: [λ: get], 
    //   set: [λ: set], 
    //   enumerable: true, 
    //   configurable: true }
  };
}

function Deco() {
  return FakeFactory();
}

class A {
  constructor() {
    description(this, 'field', 'constructor');
    // console.log: constructor
    // { value: undefined, 
    //   writable: true, 
    //   enumerable: true, 
    //   configurable: true } 
  }

  @Deco()
  field: string;
}
const a = new A();
description(a, 'field', 'final');
// console.log: final
// { value: undefined, 
//   writable: true, 
//   enumerable: true, 
//   configurable: true }

// Expected field definition  
// { get: [λ: get], 
//   set: [λ: set], 
//   enumerable: true, 
//   configurable: true }

{
  "compilerOptions": {
    "esModuleInterop": true,
    "lib": [
      "esnext"
    ],
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "incremental": true,
    "allowJs": true,
    "isolatedModules": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,

    "strictPropertyInitialization": false,
    "allowSyntheticDefaultImports": true,
  }
}

底层机制原因 #

问题出在TypeScript编译类属性的逻辑和JavaScript的属性优先级规则上：

1. TS自动生成构造函数赋值：即使你只写了field: string;这种类型声明，没有显式初始化，TypeScript会在编译后的构造函数中自动添加this.field = undefined;的代码（哪怕strictPropertyInitialization设为false，只是关闭了类型检查，编译逻辑依然会生成这段赋值）。
2. 实例属性屏蔽原型访问器：你的装饰器是给类的原型对象定义了field的getter/setter，但构造函数执行时，this.field = undefined会在实例自身上创建一个自有属性。在JavaScript中，实例的自有属性优先级高于原型上的访问器，所以后续访问a.field时，会直接读取实例上的undefined值，原型上的getter/setter被完全屏蔽。

执行顺序拆解：

• 类定义阶段：装饰器@Deco()执行，在A.prototype上定义field的访问器。
• 实例化阶段：new A()调用构造函数，执行TS自动生成的this.field = undefined，在实例a上创建自有属性field，覆盖原型上的访问器。

解决方案 #

1. 用declare阻止TS生成构造函数赋值

如果属性仅用于类型声明，不需要TS在实例上创建默认属性，直接用declare关键字标记：

class A {
  constructor() {
    description(this, 'field', 'constructor');
    // 此时实例上无自有field属性，会读取原型上的访问器
  }

  @Deco()
  declare field: string;
}

declare告诉TypeScript这只是类型注解，不会编译成实际的赋值代码，这样实例化时不会在实例上创建自有属性，原型上的getter/setter就能正常工作。

2. 修复装饰器的实例状态共享问题（附加优化）

原装饰器中的_value是闭包变量，所有实例会共享同一个值，这通常不是预期行为。可以改用Symbol存储每个实例的私有值：

function FakeFactory<T = any>() {
  return function (target: any, propertyKey: string) {
    const valueSymbol = Symbol(`_${propertyKey}`);

    Object.defineProperty(target, propertyKey, {
      get() {
        // 每个实例独立初始化值
        if (!this[valueSymbol]) {
          this[valueSymbol] = 1;
        }
        return this[valueSymbol];
      },
      set(newValue: T) {
        this[valueSymbol] = newValue;
      },
      enumerable: true,
      configurable: true,
    });
  };
}

class A {
  constructor() {
    description(this, 'field', 'constructor');
  }

  @Deco()
  declare field: string;
}

修改后每个实例的field初始值都是独立的1，同时结合declare避免了构造函数的覆盖问题。

内容的提问来源于stack exchange，提问作者gxmad