React/Typescript が iframe プロパティを認識しない 質問する

React/Typescript が iframe プロパティを認識しない 質問する

次のように、MyOwnComponent を使用して、frameborder および allowfullscreen プロパティを持つ Vimeo を再生する iframe を埋め込もうとしています。

const MyOwnVimeoComponent = () => {
return (
    <div>
        <iframe 
            src="https://player.vimeo.com/video/VIMEOID" 
            width="640" 
            height="360" 
            frameborder="0" 
            webkitallowfullscreen 
            mozallowfullscreen 
            allowfullscreen
        ></iframe>
    </div>
);}

ただし、次のようなエラーが発生します:

[ts] Property 'frameborder' does not exist on type 'HTMLProps<HTMLIFrameElement>'

も同様でありwebkitallowfullscreenmozallowfullscreenallowfullscreen

<HTMLIFrameElement>StackOverflow で他の同様の問題を調査した後、Typescript の lib.d.ts ファイルを調べて、インターフェースと変数の宣言を確認することにしました。

インターフェースには実際にプロパティframeborderallowfullscreen型がありますが、それでもエラーがスローされます。webkitallowfullscreenandに対してのみエラーがスローされるのであれば理解できますmozallowfullscreenが、ここで何が起こっているのか全体的に混乱しています。

どなたか私に正しい方向を指し示していただけると大変助かります。

参考までに、ファイルの関連部分と思われる部分を以下に示しますlib.d.ts

interface HTMLIFrameElement extends HTMLElement, GetSVGDocument {
align: string;
allowFullscreen: boolean;
allowPaymentRequest: boolean;
border: string;
readonly contentDocument: Document;
readonly contentWindow: Window;
frameBorder: string;
frameSpacing: any;
height: string;
hspace: number;
longDesc: string;
marginHeight: string;
marginWidth: string;
name: string;
noResize: boolean;
onload: (this: HTMLIFrameElement, ev: Event) => any;
readonly sandbox: DOMSettableTokenList;
scrolling: string;
src: string;
vspace: number;
width: string;
addEventListener<K extends keyof HTMLIFrameElementEventMap>(type: K, listener: (this: HTMLIFrameElement, ev: HTMLIFrameElementEventMap[K]) => any, useCapture?: boolean): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
}

declare var HTMLIFrameElement: {
    prototype: HTMLIFrameElement;
    new(): HTMLIFrameElement;
}

ベストアンサー1

ファイルを見るとわかるように、ではなく でlib.d.tsある必要があります。frameBorderframeborder

心配しないでください。私もそれを見つけるのに少し時間がかかりました!

おすすめ記事