如何在React的TypeScript文件中为div加label属性并解决类型警告？

你遇到的是TypeScript对HTML元素属性的类型校验问题——div元素在标准HTML属性里没有label，所以TS会抛出类型警告。以下是几种可行的解决方法：

• 使用标准自定义属性（推荐）
  按照HTML规范，自定义属性应该以data-开头，TypeScript默认支持这类属性，不会触发警告：

  <div data-label="apple">
      Apple!
  </div>
  <div data-label="orange">
      Orange!
  </div>
  

• 扩展TypeScript类型定义
  如果一定要保留label属性名，可以通过扩展React的HTML属性类型来让TS识别它：

  1. 在项目的src目录下创建一个global.d.ts文件
  2. 添加以下代码：

     declare module 'react' {
         interface HTMLAttributes<T> {
             label?: string;
         }
     }
     
     export {};
     

  这样所有HTML元素都会支持可选的label属性，TS就不会再抛出警告。

• 临时忽略警告（不推荐）
  用// @ts-ignore注释跳过单一行的类型检查，适合临时场景：

  // @ts-ignore
  <div label="apple">
      Apple!
  </div>
  

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