如何在TypeScript中实现attributeChangedCallback？

问题原因 #

你用keyof HelloWorldComponent作为property的类型时，该类型包含了从HTMLElement继承来的只读属性（比如ATTRIBUTE_NODE、CDATA_SECTION_NODE这类节点类型常量）。但attributeChangedCallback只会处理你在observedAttributes中声明的属性，keyof把所有继承属性都纳入范围后，TypeScript会判定你可能试图给只读属性赋值，从而抛出错误。

解决方法 #

方法1：定义仅包含可观察属性的专属类型 #

先明确组件要监听的属性，比如你的组件只关注name和count，就定义精准的类型约束：

// 仅包含需要监听的属性名
type ObservedAttributes = 'name' | 'count';

// 组件内的回调实现
attributeChangedCallback(
  property: ObservedAttributes,
  oldValue: string | null,
  newValue: string | null
) {
  if (oldValue === newValue) return;
  // 按需做类型转换，比如把count转为数字
  this[property] = property === 'count' ? Number(newValue) : newValue;
}

// 必须声明静态属性，指定要监听的属性列表
static get observedAttributes() {
  return ['name', 'count'];
}

方法2：自动过滤出可写属性 #

如果不想手动枚举属性，可以用TypeScript工具类型过滤掉只读属性：

// 提取组件中所有可写的属性名
type WritableComponentProps = {
  [K in keyof HelloWorldComponent]: HelloWorldComponent[K] extends Readonly<any> ? never : K
}[keyof HelloWorldComponent];

attributeChangedCallback(
  property: WritableComponentProps,
  oldValue: string | null,
  newValue: string | null
) {
  if (oldValue === newValue) return;
  this[property] = newValue;
}

方法3：类型断言（快速但不严谨） #

如果只是临时跳过检查，可以用类型断言，但不推荐长期使用：

attributeChangedCallback(
  property: keyof HelloWorldComponent,
  oldValue: any,
  newValue: any
) {
  if (oldValue === newValue) return;
  // 断言当前属性为可写
  (this as Record<typeof property, any>)[property] = newValue;
}

关键提醒 #

Web Component的attributeChangedCallback只会触发observedAttributes中声明的属性，所以无论用哪种方案，必须在组件中声明static observedAttributes——这不仅是Web Component的规范要求，也能让TypeScript的类型检查更精准。

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