TypeScript类Getter与Setter未触发问题排查

你遇到的核心问题是类型断言不等于实际实例化：
你用document.createElementNS()创建的是原生SVGGElement实例，哪怕用as BarWrapper做类型断言，本质上它还是浏览器原生的DOM对象，并没有挂载你自定义类BarWrapper的属性、getter/setter逻辑，自然不会触发你写的set barGroup里的日志。

解决方案1：用自定义元素（Web Components）实现真正的类继承 #

如果要让SVG元素真正拥有自定义类的逻辑，需要借助Web Components的自定义元素API，注意SVG自定义元素的命名必须包含连字符：

class BarWrapper extends SVGGElement {
  #barGroup?: SVGGElement;

  get barGroup() {
    return this.#barGroup;
  }

  set barGroup(value: SVGGElement | undefined) {
    console.log('set barGroup triggered');
    this.#barGroup = value;
  }

  constructor() {
    super();
  }
}

// 注册自定义SVG元素，extends指定继承的原生标签
customElements.define('bar-wrapper', BarWrapper, { extends: 'g' });

// 创建实例时通过is属性指定自定义类
const barWrapper = document.createElementNS(
  'http://www.w3.org/2000/svg', 
  'g', 
  { is: 'bar-wrapper' }
) as BarWrapper;

// 此时赋值会触发setter日志
barWrapper.barGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');

解决方案2：组合模式（更灵活，无需依赖自定义元素） #

如果不想用Web Components，可以用组合替代继承，把原生SVG元素作为自定义类的内部属性：

class BarWrapper {
  #svgElement: SVGGElement;
  #barGroup?: SVGGElement;

  constructor() {
    this.#svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'g');
  }

  // 对外暴露原生元素用于DOM操作
  get element() {
    return this.#svgElement;
  }

  get barGroup() {
    return this.#barGroup;
  }

  set barGroup(value: SVGGElement | undefined) {
    console.log('set barGroup triggered');
    this.#barGroup = value;
    // 可选：自动将barGroup添加到父元素DOM中
    value && this.#svgElement.appendChild(value);
  }
}

// 直接实例化自定义类
const barWrapper = new BarWrapper();
barWrapper.barGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); // 触发日志

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