Typescript扩展HtmlFrameElement

我使用的youtube Iframe具有属性

type

，显然

type

不是Iframe上存在的属性。如何将此属性添加到Iframe类型定义中

我的react组件中Iframe的定义：

TS正在抛出的错误：

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

---

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

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

---

这样，属性应该添加到全局

htmliframelement

接口。此外，在Typescript看到此声明一次后，此属性将始终在此接口上可用，因此如果您想在代码中的其他位置使用它，可以将此声明放在捆绑包顶部附近的某个位置。

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

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

这样，属性应该添加到全局

htmliframelement

接口。此外，在Typescript看到此声明一次后，此属性将始终在此界面上可用，因此如果您想在代码中的其他位置使用它，可以将此声明放在捆绑包顶部附近的某个位置。

编辑

我误解了您的想法，认为您想在

iframe

中添加非标准属性，而不是YouTube已经为其提供了

type

属性

在这种情况下，可以安全地忽略和删除

type

属性，因为它不会以任何方式更改

iframe

的行为

原始答案

我建议使用数据属性，而不是将非标准属性添加到

iframe

允许您向HTML元素添加额外数据，而无需对其类型进行黑客攻击，TypeScript完全支持它们

数据属性的前缀为

数据-

，因此在您的情况下，您将得到：

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

编辑

我误解了您的想法，认为您想在

iframe

中添加非标准属性，而不是YouTube已经为其提供了

type

属性

在这种情况下，可以安全地忽略和删除

type

属性，因为它不会以任何方式更改

iframe

的行为

原始答案

我建议使用数据属性，而不是将非标准属性添加到

iframe

允许您向HTML元素添加额外数据，而无需对其类型进行黑客攻击，TypeScript完全支持它们

数据属性的前缀为

数据-

，因此在您的情况下，您将得到：

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

感谢您的回复，但是，这似乎不起作用谢谢您的回复，但是，这似乎不起作用