How can I declare/ignore a missing JSX type?

Question

I would like to use the SVG use element in a .tsx file:

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

I'm transpiling this to React calls directly. However, I keep receiving the following error:

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

I believe this element is missing from the standard lib definitions. How can I declare this type for the TypeScript compiler to see, similar to how I can declare a class or variable? The usual declare var and declare class statements have no effect.

If that's not possible, how can I make the TypeScript compiler ignore this error?

Answer 1

If you want to ignore an error inline, use this weird syntax:

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

Taken from https://github.com/Microsoft/TypeScript/issues/27552

Answer 2

I tried @Mikey's solution it did not work, but the following works for me:

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

In the above I am ignoring type error in property id

Answer 3

A use inside mask no longer throws a type error but if it still did today you could:

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

Answer 4

You can use @ts-ignore:

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

It also works if you use inline conditions:

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

Answer 5

I'm transpiling this to React calls directly

One workaround is using React.createElement directly:

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

This isn't pretty, but it gets the job done, and the compiled output is essentially the same.