如何在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类型。现在，以下分配将不再产生类型错误：