如何解决如何在Typescript的“窗口”全局对象中添加“ adsbygoogle” AdSense属性?
我有一个可在我的网络应用中呈现<AdSense/>
广告单元的组件。
在index.html
中,我具有以下AdSense标签:
<script data-ad-client="XXXXXX" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
此脚本可能将adsbygoogle
属性注入到window
对象中。
但是在我的组件上,我必须像这样使用该属性:
useEffect(()=>{
(window.adsbygoogle = window.adsbygoogle || []).push({});
},[]);
当我的项目使用 JavaScript 时,这很好,但是现在我切换到 Typescript ,出现以下错误:
ERROR in src/components/ads/AdSenseBanner.tsx:74:13
TS2339: Property 'adsbygoogle' does not exist on type 'Window & typeof globalThis'.
如何声明此属性以使Typescript了解其含义?
我尝试过的事情:
我为全局声明创建了d.ts
。
AMBIENT.d.ts
以下内容无效。
declare const adsbygoogle: {[key: string]: unkNown}[];
declare var adsbygoogle: {[key: string]: unkNown}[];
解决方法
以下文章帮助我找到了解决方案:
https://mariusschulz.com/blog/declaring-global-variables-in-typescript
AMBIENT.d.ts
interface Window {
adsbygoogle: {[key: string]: unknown}[]
}
从该文章:
增强窗口界面
最后,您可以使用TypeScript的接口声明合并来使编译器知道它可以期望在Window类型上找到一个名为 INITIAL_DATA 的属性,因此可以找到window对象。为此,您需要定义一个名为Window的接口,并使用一个名为 INITIAL_DATA 的属性:
TypeScript会将此接口定义与lib.dom.d.ts中定义的Window接口合并在一起,从而产生单个Window类型。现在,以下分配将不再产生类型错误:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。