TypeScript：基于静态字符串数组动态声明类属性的类型处理

这是个很常见的痛点——TypeScript默认不会追踪Object.defineProperty对类原型的修改，所以即使你动态添加了属性，TS也没法识别它们。不过有几种优雅的方式可以解决这个问题，下面是最实用的两种方案：

方案一：接口合并（最直接） #

你可以通过声明同名接口的方式扩展类的类型定义，让TypeScript知道这些动态添加的属性存在。步骤如下：

1. 先把observedAttributes定义为只读元组（用as const），这样TypeScript能获取到具体的属性名称字面量类型；
2. 声明一个和类同名的接口，把元组中的属性映射为string | null类型；
3. 最后执行你的Object.defineProperty循环逻辑。

代码示例：

// 定义为只读元组，让TS捕获具体的属性名
const observedAttributes = ['attr1', 'attr2', 'attr3'] as const;

class MyElement extends HTMLElement {
  static get observedAttributes() {
    return observedAttributes;
  }
}

// 扩展MyElement的类型，告诉TS这些属性存在
declare interface MyElement {
  [K in typeof observedAttributes[number]]: string | null;
}

// 动态添加属性的逻辑不变
for (const attr of observedAttributes) {
  Object.defineProperty(MyElement.prototype, attr, {
    get() { return this.getAttribute(attr); },
    set(value) {
      if (value === null) this.removeAttribute(attr);
      else this.setAttribute(attr, value);
    },
    // 可选：让属性可枚举、可配置，符合常规属性行为
    configurable: true,
    enumerable: true
  });
}

// 现在TS能正确识别这些属性了！
const elem = new MyElement();
elem.attr1 = 'hello';
console.log(elem.attr1); // 类型是string | null

方案二：通用断言函数（适合多个Custom Element复用） #

如果你有多个自定义元素需要处理这种逻辑，可以写一个通用的断言函数，一次性完成属性添加和类型声明：

// 定义工具类型，将属性名数组转为对应属性类型
type ObservedAttributes<T extends readonly string[]> = {
  [K in T[number]]: string | null;
};

// 断言函数：告诉TS调用后类的实例会包含指定属性
function defineObservedAttributes<T extends readonly string[]>(
  elementClass: typeof HTMLElement,
  attrs: T
): asserts elementClass is typeof HTMLElement & {
  new(): HTMLElement & ObservedAttributes<T>;
} {
  for (const attr of attrs) {
    Object.defineProperty(elementClass.prototype, attr, {
      get() { return this.getAttribute(attr); },
      set(value) {
        value === null ? this.removeAttribute(attr) : this.setAttribute(attr, value);
      },
      configurable: true,
      enumerable: true
    });
  }
}

// 使用示例
const myAttrs = ['name', 'age', 'email'] as const;

class UserElement extends HTMLElement {
  static get observedAttributes() {
    return myAttrs;
  }
}

// 调用函数后，TS自动识别属性
defineObservedAttributes(UserElement, myAttrs);

const userElem = new UserElement();
userElem.name = 'Alice';
console.log(userElem.age); // 类型是string | null

为什么你之前的implements方案不行？ #

TypeScript的implements关键字要求类自身必须显式实现接口中的所有属性，它不会去追踪通过Object.defineProperty动态添加到原型上的属性。所以用接口合并或者断言函数的方式，才能让TS正确感知这些动态属性的存在。

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