【问题标题】：How do I get the TypeScript engine to allow custom HTML attributes in JSX?如何让 TypeScript 引擎在 JSX 中允许自定义 HTML 属性？
【发布时间】：2018-07-26 20:30:34
【问题描述】：

我认为 Visual Studio Code 中的 TypeScript 引擎已收到更新，现在首次抱怨我在 HTML 元素上预先存在的自定义道具无效。这是一个没有 TypeScript 的 Babel/React/JSX 项目。

<div custom="bar" />

注意：它们（技术上）无效，但我使用它们，所以我知道我在做什么（这是故意的）。

See it on CodePen!

另见

How do I add attributes to existing HTML elements in TypeScript/JSX?（一年多以前我自己发的，现在已经失效了）。
JSX | Type Checking

【问题讨论】：

你可以使用data-属性，例如data-custom应该是有效的
请提供错误信息

标签： reactjs typescript typescript-typings

【解决方案1】：

注意：如果一个属性名不是有效的JS标识符（如data-*属性），如果在元素属性类型中没有找到，则不认为是错误。

<div data-custom="bar" />

https://www.typescriptlang.org/docs/handbook/jsx.html#attribute-type-checking https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*

【讨论】：

在答案中添加详细信息
欢迎来到 Stack Overflow！请不要把你的源代码扔在这里。友善一点，并尝试对您的答案进行漂亮的描述，以便其他人会喜欢并支持它。见：How do I write a good answer?

【解决方案2】：

React 类型定义文件（默认情况下 - index.d.ts 与 create-react-app 一起使用时）包含所有标准 HTML 元素的列表，以及已知属性。

为了允许自定义 HTML 属性，您需要定义它的类型。通过扩展HTMLAttributes 接口来做到这一点：

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

【讨论】：

这会破坏“react”模块的 typescript 类型检查。

【解决方案3】：

项目结构：

☁  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 接口。

选项 1：

index.d.ts:

import 'react';

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

输出：

选项 2：

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

输出：

【讨论】：