TypeScript报错：React.KeyboardEvent类型不存在code属性如何解决

方案1：替换为React类型已支持的key属性判断 #

如果你的业务逻辑不需要严格区分物理按键位置，优先用React类型内置的key属性实现，完全符合类型规范，无额外兼容成本：

const onKeyDownSim = (event: React.KeyboardEvent<HTMLInputElement>) => {
    const element = event.target as HTMLElement;
    // 空格的key属性值为' '，直接判断即可
    if (event.key === ' ') element.click();
};

注意：如果是要区分主键盘空格和其他位置的相同输入按键，key属性无法满足，需要用以下方案获取code。

方案2：从合成事件的nativeEvent属性取原生事件对象 #

React合成事件的nativeEvent字段对应的是原生DOM KeyboardEvent，原生类型本身自带code属性定义，无需额外类型修改：

const onKeyDownSim = (event: React.KeyboardEvent<HTMLInputElement>) => {
    const element = event.target as HTMLElement;
    if (event.nativeEvent.code === 'Space') element.click();
};

方案3：临时类型断言跳过检查 #

如果只是临时修复不想改动逻辑，可直接对事件对象做类型断言：

const onKeyDownSim = (event: React.KeyboardEvent<HTMLInputElement>) => {
    const element = event.target as HTMLElement;
    if ((event as unknown as { code: string }).code === 'Space') element.click();
};

注意：该方案会跳过类型检查，不推荐长期使用。

方案4：全局扩展React KeyboardEvent类型定义 #

如果项目多处需要用到code属性，可以在全局类型声明文件（比如react-app-env.d.ts或者global.d.ts）中补充类型定义：

import 'react';

declare module 'react' {
  interface KeyboardEvent<T = Element> {
    // 补充code属性定义
    code: string;
  }
}

补充后项目内所有React.KeyboardEvent类型都会自动带有code属性，无需额外断言。

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