如何查找React+TypeScript中HTML元素的原生属性接口

一、遵循统一命名规则 #

React为原生HTML元素提供的属性接口有固定命名逻辑，记住规律就能快速推导：

• 对于表单类/特定功能元素（如input、button、textarea）：格式为 React.[ElementName]HTMLAttributes<HTML[ElementName]Element>
  例：
  • Input元素 → React.InputHTMLAttributes<HTMLInputElement>
  • Button元素 → React.ButtonHTMLAttributes<HTMLButtonElement>
  • Textarea元素 → React.TextareaHTMLAttributes<HTMLTextAreaElement>
• 对于通用块级/行内元素（如div、p、span）：使用通用的React.HTMLAttributes<HTML[ElementName]Element>
  例：
  • Div元素 → React.HTMLAttributes<HTMLDivElement>
  • Span元素 → React.HTMLAttributes<HTMLSpanElement>
• 特殊元素例外：比如a标签对应React.AnchorHTMLAttributes<HTMLAnchorElement>，img标签对应React.ImgHTMLAttributes<HTMLImageElement>

二、利用编辑器自动补全 #

在VS Code等支持TypeScript的编辑器中：

• 输入React.后，编辑器会弹出属性接口的补全列表，输入元素关键词（如Button、Anchor）即可快速定位目标接口
• 输入HTML开头的DOM元素类型（如HTMLButtonElement）时，也能通过补全确认对应的元素类型，反向推导属性接口

三、直接查看React类型定义文件 #

项目中安装的@types/react包自带完整的类型定义：

• 打开项目目录下的node_modules/@types/react/index.d.ts文件
• 搜索关键词（如HTMLAttributes、目标元素名称），就能找到所有相关的属性接口定义，还能查看接口包含的具体属性

示例：创建带自定义属性的Button组件 #

type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  icon?: React.ReactNode;
};

const Button = ({ icon, ...props }: ButtonProps) => {
  return (
    <button className="px-4 py-2 rounded bg-blue-500 text-white" {...props}>
      {icon && <span className="mr-2">{icon}</span>}
      {props.children}
    </button>
  );
};

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