如何让TypeScript引擎在JSX中允许自定义HTML属性？

Question

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

QLocale locale = this->locale();
QString valueText = locale.formattedDataSize(sizeValue);

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

See it on CodePen!

另见

• How do I add attributes to existing HTML elements in TypeScript/JSX?（一年多前我自己发布，不再工作了。）
• JSX | Type Checking

Answer 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-*

Answer 2

反应类型定义文件（默认情况下，当与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;
  }
}