我如何 declare/ignore 缺少 JSX 类型？

Question

我想在 .tsx 文件中使用 SVG use element:

<mask id="mask1">
    <use ... />
</mask>

我正在将其直接转译为 React 调用。但是，我不断收到以下错误：

Property 'use' does not exist on type 'JSX.IntrinsicElements'.

我认为标准库定义中缺少此元素。我如何声明此类型供 TypeScript 编译器查看，类似于我如何声明 class 或变量？通常的 declare var 和 declare class 语句没有效果。

如果那不可能，我怎样才能让 TypeScript 编译器忽略这个错误？

Answer 1

I'm transpiling this to React calls directly

一种解决方法是直接使用 React.createElement：

<mask id="mask1">
    {React.createElement("use", { ... })}
</mask>

这不是很漂亮，但它完成了工作，编译后的输出基本相同。

Answer 2

在撰写本文时，

use 和其他 SVG 元素已添加到 TS 的 JSX 定义中，因此不再需要已接受答案的解决方法——但对于任何被带到这里的人来说，因为他们需要获得在 TSX 文件中工作的自定义元素（Web 组件、不同的 UI 框架等），请按照下列步骤操作：

创建一个 .d.ts 文件。我喜欢将我的放在与 tsconfig.json
将您的定义添加到此文件，例如：

声明模块 JSX { 接口内在元素{ 'some-custom-element'：任何； } }

.d.ts 文件被 TS 自动找到，然后停止报错。我必须重新启动我的 TS 服务器才能接收更改。

Answer 3

如果您想忽略内联错误，请使用这种奇怪的语法：

{/*
 // @ts-ignore */}
<Foo id="fooDoesNotHaveIdType" />

取自https://github.com/Microsoft/TypeScript/issues/27552

Answer 4

我尝试了@Mikey 的解决方案，但它没有用，但以下对我有用：

    <Foo
      /*
      // @ts-ignore */
      id="foo does not have IdType"
      baz="foo Have bazType"
    />

在上面我忽略了属性 id

中的类型错误

Answer 5

mask 中的 use 不再抛出类型错误，但如果今天仍然抛出类型错误，您可以：

<mask id="mask1">
    {/* @ts-ignore */} 
    <use ... />
</mask>

Answer 6

您可以使用 @ts-ignore:

{/* @ts-ignore */} 
<mask id="mask1">
  <use ... />
</mask>

如果您使用内联条件，它也有效：

{
  /* @ts-ignore */ myCondition && (
    <mask id="mask1">
      <use ... />
    </mask>
  )
}

Answer 7

截至 22 年 3 月 20 日，对我来说最好的解决方案似乎是 /* @ts-expect-error */:

<ComponentWithTroublesomeProp
  okayProp={a}
  anotherOkayProp={b}
  /* @ts-expect-error */
  problematicProp={cGotTroubles}
  yetAnotherOkayProp={d}
/>

从 relevant GitHub Issue, what the 的提议来看，现在已经过时了。

您也可以尝试 // @ts-ignore，但是如果您设置了 @typescript-eslint，您可能启用了 @typescript-eslint/ban-ts-comment 规则，这意味着您必须使用类似这样的操作，使用两行而不是一行：

<ComponentWithTroublesomeProp
  okayProp={a}
  anotherOkayProp={b}
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  problematicProp={cGotTroubles}
  yetAnotherOkayProp={d}
/>

我如何 declare/ignore 缺少 JSX 类型？

How can I declare/ignore a missing JSX type?

jsx

typescript