如何将 "adsbygoogle" AdSense 属性 添加到 Typescript 中的 "window" 全局对象？

Question

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

Answer 1

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

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:

Answer 2

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

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

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