打字稿扩展HTMLIFrameElement

Question

我使用的YouTube Iframe具有属性type，显然type不是iframe上的属性。如何将该属性添加到Iframe类型定义中？

我的react组件中Iframe的定义：

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

TS引发的错误：

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

我尝试了以下类似的尝试，但无济于事：

interface HTMLIFrameElement {
  type?: string;
}

Answer 1

尝试全局添加此属性，如下所示：

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

这样，应该将属性添加到全局HTMLIFrameElement接口中。另外，在Typescript一次看到此声明之后，该属性将始终在此接口上可用，因此，如果要在代码的其他位置使用它，则可以将该声明放置在包顶部附近。

Answer 2

修改

我误解了，以为您想向iframe添加非标准属性，而不是YouTube已经为其提供了type属性。

在这种情况下，可以安全地忽略和删除type属性，因为它不会以任何方式改变iframe的行为。

原始答案

我建议您使用data属性，而不是向iframe添加非标准属性。

Data Attributes允许您向HTML元素添加额外的数据，而不会破坏它们的类型，而TypeScript完全支持它们。

数据属性以data-为前缀，因此，在您的情况下，您将得到：

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