typescript - Hvordan kan jeg erklære/ignorere en manglende JSX-type?

Jeg vil gjerne bruke SVG use-elementet i en .tsx-fil:

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

Jeg transpilerer dette direkte til React-kall. Imidlertid fortsetter jeg å få følgende feil:

Egenskapen 'use' finnes ikke på typen 'JSX.IntrinsicElements'.

Jeg tror dette elementet mangler fra standardbiblioteksdefinisjonene. Hvordan kan jeg erklære denne typen slik at TypeScript-kompilatoren kan se den, på samme måte som jeg kan erklære en klasse eller variabel? De vanlige declare var og declare class-utsagnene har ingen effekt.

Hvis det ikke er mulig, hvordan kan jeg få TypeScript-kompilatoren til å ignorere denne feilen?

Svar #1

Hvis du vil ignorere en feil inline, bruk denne merkelige syntaksen:

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

Hentet fra https://github.com/Microsoft/TypeScript/issues/27552

Svar #2

Jeg prøvde @Mikey sin løsning, det fungerte ikke, men følgende fungerer for meg:

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

I det ovenstående ignorerer jeg typefeil i egenskapen id

Svar #3

En use inne i mask kaster ikke lenger en typefeil, men hvis det fortsatt gjorde det i dag, kunne du:

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

Svar #4

Du kan bruke @ts-ignore:

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

Det fungerer også hvis du bruker inline-betingelser:

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

Svar #5

Per 20.03.22 virker den beste løsningen for meg å være /* @ts-expect-error */:

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

Dømt ut fra den relevante GitHub-issuen, er det som det aksepterte svaret foreslår nå utdatert.

Du kan også prøve // @ts-ignore, men hvis du har @typescript-eslint satt opp, har du sannsynligvis regelen @typescript-eslint/ban-ts-comment aktivert, noe som betyr at du må gjøre noe sånt som dette, bruke to linjer i stedet for én:

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

Relaterte artikler