开发者问题收集

如何将“adsbygoogle”AdSense 属性添加到 Typescript 中的“window”全局对象?

2020-11-05
2329

我有一个组件,可在我的网络应用上呈现 <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}[];

在此处输入图像描述

2个回答

以下文章帮助我找到了解决方案:

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 :

enter image description here

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:

enter image description here

cbdeveloper
2020-11-05

以下代码片段是我使用的...

declare let adsbygoogle: any;
(adsbygoogle = (window as any).adsbygoogle || []).push({});

顶行也可以移动到 .d.ts 文件中。

Josh Merlino
2021-09-03