React+TS扩展InputHTMLAttributes时传data-*属性报ts(2322)错误原因

使用React与TypeScript封装TextInput组件时，组件属性类型通过扩展InputHTMLAttributes<HTMLInputElement>实现，预期该写法支持直接传入所有原生input属性，无需逐个显式声明。
实际使用中传入任意data-*自定义属性时，TypeScript抛出类型错误：

Object literal may only specify known properties, and 'data-whatever' does not exist in type 'Partial'.ts(2322)
同属全局标准HTML属性的aria-*可以正常传入，无需额外兼容。当前临时修复方案为补充自定义索引签名：

type DataType = `data-${string}`

interface DataFix {
    [key: DataType]: string,
}

该问题是@types/react类型定义的历史版本缺陷导致，和HTML标准、TypeScript本身的逻辑无关：

• 对aria-*属性，@types/react很早就通过模板字符串类型声明了通用索引签名，所有符合aria-${string}格式的属性都会被类型系统判定为合法属性，因此可以直接传入。
• 在@types/react18.0.28之前的版本中，类型定义没有为data-*属性添加对应的通用模板字符串索引签名，仅枚举了极少数特定场景的data属性，因此传入自定义的data-xxx属性时会触发未知属性的类型报错。
• 你当前使用的临时修复方案，本质就是手动补全了@types/react缺失的data-*通用索引签名，和React类型库内部处理aria-*属性的逻辑完全一致。

• 优先将项目依赖中的@types/react升级到18.0.28及以上的稳定版本，官方已经在该版本后补充了data-*属性的通用类型声明，升级后无需额外编写兼容代码，即可正常传入任意data-*自定义属性。
• 如果受项目依赖锁版本限制无法升级@types/react，当前使用的DataFix索引签名方案可以长期使用，不会引发类型冲突或运行时异常。

内容的提问来源于stack exchange，提问作者igor.live