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

问题描述

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

注意:它们(技术上)无效，但我使用它们，所以我知道我在做什么(这是故意的).

在 CodePen 上查看！

另见

• 如何添加属性到 TypeScript/JSX 中现有的 HTML 元素?(我一年多前发布的，现在不再适用了).
• JSX |类型检查

解决方案

React 类型定义文件(默认 - index.d.ts 当使用 create-react-appcode>) 包含所有标准 HTML 元素的列表，以及已知属性.

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

声明模块'反应'{接口 HTMLAttributes扩展 AriaAttributes、DOMAttributes<T>{//扩展 React 的 HTMLAttributes自定义?:字符串；}}

I presume the TypeScript engine within Visual Studio Code has received an update that is now complaining for the first time that my pre-existing custom props on HTML elements are invalid. This is on a Babel/React/JSX project with no TypeScript whatsoever.

<div custom="bar" />

Note: they are (technically) invalid, but I consume them, so I know what I'm doing (it's intentional).

See it on CodePen!

See also

• How do I add attributes to existing HTML elements in TypeScript/JSX? (posted by myself over a year ago and doesn't work any more).
• JSX | Type Checking

解决方案

React type definition file (by default - index.d.ts when staring with create-react-app) contain list of all the standard HTML elements, as well as known attributes.

In order to allow custom HTML attributes, you need to define it's typing.Do that by expanding HTMLAttributes interface:

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

这篇关于如何让 TypeScript 引擎允许在 JSX 中自定义 HTML 属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！