TypeScript中能否根据运行环境动态切换类字段的装饰器？

I've defined a field sampleField in a TypeScript class with the DecoratorA decorator, and I want to switch this field's decorator from DecoratorA to DecoratorB under a specific runtime environment. Is it possible to achieve this with conditional logic inside the constructor? Here's my code example:

class SampleClass {
  @DecoratorA
  sampleField;

  constructor() {
    if (condition) {
      // change DecoratorA to DecoratorB
    }
  }
}

Unfortunately, you can't switch decorators inside the constructor—here's why:

Decorators in TypeScript (and JavaScript) execute at class definition time, not when you instantiate an object with new SampleClass(). By the time your constructor runs, DecoratorA has already been applied to sampleField and completed its work (like modifying the property descriptor, adding metadata, etc.). The constructor only runs when creating an instance, so it's too late to swap out a decorator that was already applied during class setup.

But don't worry—there are a few solid workarounds to get the behavior you want:

1. Use a conditional decorator directly on the field #

Instead of trying to swap decorators later, pick the right one at class definition time using your condition. This works if your condition can be evaluated when the class is defined (e.g., checking an environment variable set at build/startup time):

// Pick the decorator based on your condition
const ConditionalDecorator = condition ? DecoratorB : DecoratorA;

class SampleClass {
  @ConditionalDecorator
  sampleField;
}

2. Add conditional logic inside a wrapper decorator #

If your condition needs to be evaluated at runtime (per instance), create a wrapper decorator that delegates to either DecoratorA or DecoratorB based on the instance or environment:

function ConditionalWrapperDecorator(target: any, propertyKey: string) {
  const originalDescriptor = Object.getOwnPropertyDescriptor(target, propertyKey);
  
  Object.defineProperty(target, propertyKey, {
    get() {
      // Decide which decorator's behavior to use here
      if (condition) {
        return DecoratorB(target, propertyKey).get?.call(this);
      } else {
        return DecoratorA(target, propertyKey).get?.call(this);
      }
    },
    set(value) {
      if (condition) {
        DecoratorB(target, propertyKey).set?.call(this, value);
      } else {
        DecoratorA(target, propertyKey).set?.call(this, value);
      }
    },
    configurable: originalDescriptor?.configurable,
    enumerable: originalDescriptor?.enumerable
  });
}

class SampleClass {
  @ConditionalWrapperDecorator
  sampleField;
}

Note: This approach assumes your decorators modify the property descriptor (common for field decorators). You may need to adjust the wrapper to match how your specific decorators work (e.g., handling metadata if that's part of their functionality).

3. Dynamically modify the instance property in the constructor #

If your decorators primarily affect the property's behavior (like getters/setters), you can redefine the property on the instance in the constructor to match what DecoratorB would do:

class SampleClass {
  @DecoratorA
  sampleField;

  constructor() {
    if (condition) {
      // Redefine the property to match DecoratorB's implementation
      Object.defineProperty(this, 'sampleField', {
        get() { /* DecoratorB's getter logic */ },
        set(value) { /* DecoratorB's setter logic */ },
        configurable: true,
        enumerable: true
      });
    }
  }
}

This bypasses the original DecoratorA-applied property on the prototype with an instance-specific property that follows DecoratorB's rules.

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