typescript - 如何将“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.tsfor 全局声明。

环境.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

环境.d.ts

interface Window {
  adsbygoogle: {[key: string]: unknown}[]
}

从那篇文章：

增强窗口界面

最后，您可以使用 TypeScript 的接口声明合并来让编译器知道它可以期望在 Window 类型上找到名为INITIAL_DATA的属性，从而在 window 对象上找到。为此，您需要使用名为INITIAL_DATA的属性定义一个名为 Window 的接口：

TypeScript 会将这个接口定义与 lib.dom.d.ts 中定义的 Window 接口合并在一起，从而产生一个单一的 Window 类型。现在，以下赋值将不再产生类型错误：

Answer 2

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

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

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