TypeScript如何处理JSX中的`data-*`属性？其类型定义位置在哪？

你要找的data-*属性类型支持，并没有以你想象的`data-${string}`模板字符串属性的形式直接定义，而是通过字符串索引签名来实现的，具体位置在@types/react包的类型文件中：

• 核心定义位于node_modules/@types/react/index.d.ts（或是拆分后的src/dom.ts源文件）里的DOMAttributes<T>接口，该接口被HTMLAttributes<T>继承，几乎所有HTML元素的属性接口都基于HTMLAttributes<T>扩展。
• DOMAttributes<T>包含一个字符串索引签名，允许任意字符串作为属性名，以此兼容data-*这类自定义属性，大致形式如下：

interface DOMAttributes<T> {
  // ... 其他内置属性定义（如onClick、className等）
  [key: string]: any; // 这个索引签名允许所有自定义属性，包括data-*
}

这种设计是因为data-*的后缀可以是任意字符串，无法提前枚举所有可能的data-*属性，所以用通用的字符串索引来覆盖所有情况，这也是你的示例代码不会触发TypeScript错误的原因。

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