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>

这个脚本可能注入(inject)了 adsbygoogle属性(property)给 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: