如何将“adsbygoogle”AdSense 属性添加到 Typescript 中的“window”全局对象?
我有一个组件,可在我的网络应用上呈现
<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}[]
}
来自该文章:
Augmenting the Window Interface
Lastly, you can use TypeScript's interface declaration merging to let the compiler know that it can expect to find a property named INITIAL_DATA on the Window type and therefore the window object. To do that, you'll need to define an interface named Window with a property named INITIAL_DATA :
TypeScript will merge this interface definition together with the Window interface defined in lib.dom.d.ts, resulting in a single Window type. Now, the following assignment will no longer produce a type error:
以下代码片段是我使用的...
declare let adsbygoogle: any;
(adsbygoogle = (window as any).adsbygoogle || []).push({});
顶行也可以移动到
.d.ts
文件中。