如何声明/忽略缺少的 JSX 类型？答案

【问题标题】：How can I declare/ignore a missing JSX type?如何声明/忽略缺少的 JSX 类型？
【发布时间】：2017-03-07 19:33:39
【问题描述】：

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

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

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

“JSX.IntrinsicElements”类型上不存在属性“use”。

我相信标准库定义中缺少这个元素。如何声明此类型以供 TypeScript 编译器查看，类似于声明类或变量的方式？通常的declare var 和declare class 语句无效。

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

【问题讨论】：

【解决方案1】：

你可以使用@ts-ignore:

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

如果你使用内联条件，它也可以工作：

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

【讨论】：

【解决方案2】：

mask 内的 use 不再引发类型错误，但如果它今天仍然存在，您可以：

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

【讨论】：

【解决方案3】：

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

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

在上面我忽略了属性id中的类型错误

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

.d.ts 文件被 TS 自动找到，然后停止抱怨。我必须重新启动我的 TS 服务器才能获取更改。

【讨论】：

【解决方案6】：

我将其直接转换为 React 调用

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

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

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

【讨论】：