Typescript utökar HTMLIFrameElement

Jag använder en YouTube-iframe som har attributet type, tydligen är type inte en egenskap som finns på Iframe. Hur skulle jag lägga till detta attribut i Iframe-typsdefinitionen?

Definitionen av Iframe i min React-komponent:

<iframe 
    id="ytplayer" 
    type="text/html"
    src={someSource}
    frameBorder="0">
</iframe>

Felet som TS kastar:

Property 'type' does not exist on type 'DetailedHTMLProps<IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>'

Jag har försökt något liknande följande med liten framgång:

interface HTMLIFrameElement {
  type?: string;
}

Svar #1

Redigera

Jag missförstod och trodde att du ville lägga till icke-standardiserade egenskaper till iframe och inte att YouTube redan tillhandahåller det med type-egenskapen.

I det här fallet kan type-egenskapen säkert ignoreras och tas bort eftersom den inte kommer att förändra iframe:s beteende på något sätt.

Originalt svar

Istället för att lägga till en icke-standardegenskap på en iframe, skulle jag föreslå att använda ett data-attribut.

Dataattribut tillåter dig att lägga till extra data till HTML-element utan att manipulera deras typer och TypeScript stöder dem fullt ut.

Dataattribut får prefixet data-, så i ditt fall skulle du få:

<iframe 
    id="ytplayer" 
    data-type="text/html"
    src={someSource}
    frameBorder="0">
</iframe>

Svar #2

Försök att lägga till detta attribut globalt, så här:

declare global {
    interface HTMLIFrameElement {
        type?: string;
    }
}

På det sättet bör attributet läggas till i det globala HTMLIFrameElement-gränssnittet. Dessutom, efter att Typescript ser denna deklaration en gång, kommer detta attribut alltid att vara tillgängligt på detta gränssnitt, så om du vill använda det på andra ställen i din kod kan du placera denna deklaration någonstans nära toppen av ditt bundel.