Shopware中使用TypeScript时无法使用static options的解决方案咨询

方法1：在构造函数中将静态options挂载到实例 #

export default class CheckoutPhoneNumberPlugin extends Plugin {
  static options = {
    billingPhoneNumberSelector: '#billingAddressAddressPhoneNumber',
    shippingPhoneNumberSelector: '#shippingAddressAddressPhoneNumber'
  };

  constructor(...args: any[]) {
    super(...args);
    // 把静态options赋值给实例属性
    this.options = (this.constructor as typeof CheckoutPhoneNumberPlugin).options;
  }

  init() {
    this._billingPhoneNumber = document.querySelector(this.options.billingPhoneNumberSelector);
    this._shippingPhoneNumber = document.querySelector(this.options.shippingPhoneNumberSelector);

    this._registerEvents();
  }
  // ...其他插件逻辑
}

这种方式既满足Shopware编译流程对static options的要求，又能让类实例通过this.options正常访问配置——构造函数执行时会将类的静态属性挂载到当前实例上。

方法2：使用getter动态获取静态options #

export default class CheckoutPhoneNumberPlugin extends Plugin {
  static options = {
    billingPhoneNumberSelector: '#billingAddressAddressPhoneNumber',
    shippingPhoneNumberSelector: '#shippingAddressAddressPhoneNumber'
  };

  get options() {
    // 类型断言确保TypeScript识别当前构造函数的类型
    return (this.constructor as typeof CheckoutPhoneNumberPlugin).options;
  }

  init() {
    this._billingPhoneNumber = document.querySelector(this.options.billingPhoneNumberSelector);
    this._shippingPhoneNumber = document.querySelector(this.options.shippingPhoneNumberSelector);

    this._registerEvents();
  }
  // ...其他插件逻辑
}

通过实例的getter方法，每次访问this.options时都会动态读取类的静态属性，无需额外的属性赋值操作，同时保持原有代码的调用习惯。

问题根源 #

Shopware的JavaScript编译流程依赖static options来处理插件配置，但在TypeScript中，静态属性属于类本身而非实例，直接通过this.options访问会触发类型错误。上述两种方案都在不破坏Shopware要求的前提下，打通了实例到静态属性的访问路径。

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