React中如何为所有HTML元素扩展自定义data-属性类型以支持自动补全？

不用逐个扩展IntrinsicElements里的元素，你可以通过TypeScript的模块扩充+映射类型实现全局属性支持，同时避免递归问题，具体步骤如下：

1. 定义自定义data属性类型 #

先声明你需要支持的自定义data属性，比如：

type CustomDataAttributes = {
  'data-your-custom-attr'?: string;
  // 可添加更多自定义data-*属性，比如data-detect-flag?: boolean
};

2. 生成扩展后的IntrinsicElements类型 #

通过映射类型遍历原JSX.IntrinsicElements的所有元素，把每个元素的原有属性和自定义属性合并：

type ExtendedIntrinsicElements = {
  [ElementName in keyof JSX.IntrinsicElements]: 
    JSX.IntrinsicElements[ElementName] & CustomDataAttributes;
};

3. 全局扩充JSX类型 #

用declare global把扩展后的类型合并到全局JSX.IntrinsicElements中：

declare global {
  namespace JSX {
    interface IntrinsicElements extends ExtendedIntrinsicElements {}
  }
}

为什么这个方法不会递归？ #

之前你遇到递归问题，是因为直接在IntrinsicElements的扩充里引用了自身的映射类型。而上面的写法先把原IntrinsicElements的完整类型提取到ExtendedIntrinsicElements中，再让IntrinsicElements扩展这个预生成的类型，彻底避免了循环引用。

这样设置后，所有HTML元素（比如<div>、<button>、<input>等）都会自动支持你定义的自定义data属性的代码补全和类型检查，不用逐个元素去扩展。

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