React类型定义文件（默认情况下为create-react-app）包含所有标准HTML元素以及已知属性的列表。
为了允许自定义HTML属性，你需要定义它的类型。通过扩展HTMLAttributes接口来实现：

import { HTMLAttributes } from "react";

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    // extends React's HTMLAttributes
    custom?: string;
  }
}

阅读更多关于TypeScript文档上的模块增强。

注意：如果一个属性名不是一个有效的JS标识符（比如data-* 属性），如果在元素attributes类型中找不到它，它不会被认为是一个错误。
<div data-custom="bar" />
www.example. com https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*

项目结构：

☁  extends-react-types  tree -I 'node_modules' 
.
├── App.tsx
├── index.d.ts
├── package-lock.json
├── package.json
└── tsconfig.json

0 directories, 5 files

软件包版本：

{
  "name": "extends-react-types",
  "devDependencies": {
    "@types/react": "^16.9.56",
    "typescript": "^4.3.5"
  },
  "dependencies": {
    "react": "^16.8.6"
  }
}

tsconfig.json：

{
    "compilerOptions": {
        "target": "es5",
        "lib": [
            "dom"
        ],
        "allowSyntheticDefaultImports": true,
        "moduleResolution": "Node",
        "jsx": "preserve",
    }
}

App.tsx：

import React from 'react';

interface HomeProps extends React.ComponentPropsWithRef<'div'> {}
export default function Home(props: HomeProps) {
  return (
    <div>
      <p _name="name" _error={true}>
        123
      </p>
    </div>
  );
}

正如您所看到的，p元素中有两个自定义HTML属性：_name和_error。现在，我们需要使用这两个自定义HTML属性扩展React的HTMLAttributes接口。

选项一：

index.d.ts：

import 'react';

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    _name?: string;
    _error?: boolean;
  }
}

输出：

选项二：

declare namespace React {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    _name?: string;
    _error?: boolean;
  }
}

输出：