Typescript extinde HTMLIFrameElement

Folosesc un iframe YouTube care are atributul type, aparent type nu este o proprietate care există pe Iframe. Cum aș putea să adaug acest atribut la definiția tipului Iframe?

Definiția iframe-ului în componenta mea React:

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

Eroarea pe care o aruncă TS:

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

Am încercat ceva de genul următor, cu puțin succes:

interface HTMLIFrameElement {
  type?: string;
}

Răspuns #1

Editează

Am înțeles greșit și am crezut că vrei să adaugi proprietăți non-standard la iframe și nu că YouTube le oferă deja cu proprietatea type.

În acest caz, proprietatea type poate fi ignorată și eliminată în siguranță, deoarece nu va schimba în niciun fel comportamentul iframe-ului.

Răspuns original

În loc să adăugați o proprietate non-standard la un iframe, aș sugera să folosiți un atribut de tip data.

Atributele de date vă permit să adăugați date suplimentare elementelor HTML fără a le modifica tipurile, iar TypeScript le suportă complet.

Atributele de date sunt prefixate cu data-, așa că, în cazul tău, vei obține:

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

Răspunsul #2

Încearcă să adaugi acest atribut la nivel global, astfel:

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

În acest fel, atributul ar trebui să fie adăugat la interfața globală HTMLIFrameElement. De asemenea, după ce Typescript vede această declarație o dată, acest atribut va fi întotdeauna disponibil pe această interfață, așa că dacă dorești să îl folosești în alte locuri din codul tău, poți plasa această declarație undeva aproape de partea de sus a pachetului tău.