在ReactJS+TypeScript环境中如何为<button>标签添加额外自定义Props

报错原因 #

TypeScript 会对原生HTML元素的属性做静态类型校验，只有内置在类型定义中的属性才会被识别。aria-current虽然是WAI-ARIA标准属性，如果你使用的类型定义包版本较低，或者项目没有引入完整的ARIA类型定义，就会触发该报错。

解决方案 #

• 升级类型定义包（优先推荐）
  如果是React项目，绝大多数情况下升级@types/react和@types/react-dom到最新版本即可解决，新版本已经内置了aria-current的类型支持：

npm install @types/react@latest @types/react-dom@latest --save-dev

如果是原生TypeScript项目，升级typescript到最新正式版即可。

• 手动扩展类型定义
  如果不想升级依赖，你可以在项目的全局类型声明文件（通常是src/global.d.ts、typings.d.ts或者React项目自带的src/react-app-env.d.ts）中添加类型扩展：
  • React项目扩展写法：

import 'react';

declare module 'react' {
  interface ButtonHTMLAttributes<T> {
    'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | boolean;
  }
}

• 原生TS项目扩展写法：

interface HTMLButtonElement {
  'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | boolean;
}

添加完成后重启TS服务，报错就会消失。

• 临时类型断言（仅适合临时使用）
  如果只是单次使用不想修改全局配置，可以用类型断言绕开校验：

// React场景示例
<button {...({ 'aria-current': 'page' } as React.ButtonHTMLAttributes<HTMLButtonElement>)}>
  首页
</button>

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