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

Question

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

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

我正在直接将其转发给React。但是，我一直收到以下错误：

  

'JSX.IntrinsicElements'类型中不存在属性'use'。

Visual Studio 2015社区版

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

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

Answer 1

我尝试了@Mikey的解决方案，该解决方案无效，但是以下对我有用：

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

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

Answer 2

如果要忽略内联错误，请使用以下奇怪的语法：

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

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

Answer 3

  

我正在将此问题转发给React直接调用

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

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

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

Answer 4

在撰写本文时，

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

1. 创建.d.ts文件。我喜欢把它放在与tsconfig.json
相同的文件夹中

2. 将您的定义添加到此文件中，例如：

   声明模块JSX {   interface IntrinsicElements {     ＆＃39; some-custom-element＆＃39;：any;   } }

TS自动找到.d.ts文件，然后停止抱怨。我不得不重新启动我的TS服务器以获取更改。

Answer 5

use中的mask不再引发类型错误，但是如果今天仍然如此，您可以：

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