如何在TypeScript中处理HTML布尔值？

HTML中的布尔属性遵循存在即真的规则：只要属性存在（不管值是空字符串""还是"true"），浏览器都会解析为true；属性不存在则对应false。但在SSR场景下，服务端可能会将布尔属性渲染为autoplay="true"这类格式，而客户端Hydration时读取到的属性值是空字符串，导致两端属性值不一致，触发Hydration错误。以下是针对这类场景的正确类型标注与处理方案：

类型标注规范 #

不要直接用boolean类型定义HTML布尔属性，需兼容HTML属性的实际取值情况：

1. 原生Web组件的类型处理（TypeScript） #

将属性的类型定义为"" | boolean | undefined，同时通过hasAttribute()统一判断逻辑布尔值，避免依赖属性的具体取值：

class MyCustomElement extends HTMLElement {
  static get observedAttributes() {
    return ['my-boolean-prop'];
  }

  // 对外暴露逻辑布尔值
  get myBooleanProp(): boolean {
    return this.hasAttribute('my-boolean-prop');
  }

  // 设置时遵循HTML布尔属性规范
  set myBooleanProp(value: boolean) {
    value ? this.setAttribute('my-boolean-prop', '') : this.removeAttribute('my-boolean-prop');
  }

  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
    if (name === 'my-boolean-prop') {
      // 用newValue是否为null判断属性存在性，而非具体值
      const isEnabled = newValue !== null;
      // 执行组件业务逻辑
    }
  }
}
customElements.define('my-custom-element', MyCustomElement);

2. 框架封装时的Props类型兼容 #

如果用React等框架封装自定义组件，Props类型需兼容布尔值和空字符串，同时确保框架渲染时遵循HTML规范：

interface MyCustomElementProps {
  myBooleanProp?: boolean | '';
}

// 使用示例
<my-custom-element myBooleanProp />
<my-custom-element myBooleanProp={true} />

SSR兼容核心要点 #

• 服务端渲染时，严格遵循HTML布尔属性规范：布尔属性为true时仅输出属性名（或空值），为false时不输出该属性，避免渲染my-boolean-prop="true"这类格式。
• 客户端始终通过hasAttribute()判断布尔属性的状态，而非直接读取getAttribute()的结果，确保不管服务端输出的是空字符串还是"true"，客户端都能得到一致的逻辑值。

内容的提问来源于stack exchange，提问作者Johan Martin Aarstein