如何获得TypeScript引擎以允许JSX中的自定义HTML属性？

Question

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

<div custom="bar" />

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

在CodePen上看到它！

也可以看看

• 如何在TypeScript / JSX中向现有HTML元素添加属性？（由我自己一年多以前发布，现在不再起作用）。
• JSX | 类型检查

Answer 1

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;
  }
}

Answer 2

注意：如果属性名称不是有效的 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-*