谷歌分析 4 与打字稿

Question

我想创建一个仅在访问者同意时才触发 GA4 测量的函数。我创建它如下：

document.querySelector('.cookie').addEventListener('click', function(){

        var ga = document.createElement('script')
        ga.type = 'text/javascript'
        ga.async = true
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.googletagmanager.com/gtag/js?id=UA-XXXXXX-X'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);


        let gat = window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());
                gtag('config', 'UA-XXXXXX-X');
                setCookie('cookie','1',365);
        return false;
    })

问题是打字稿报告错误：Property 'dataLayer' does not exist on type 'Window & typeof globalThisa gtag - Expected 0 arguments, but got 2.

我已经尝试了各种教程，已安装@types/gtag.js，但错误仍然存​​在。你能告诉我我做错了什么吗？谢谢

Answer 1

这些 Typescript 定义应该有效：

        interface Window {
        dataLayer:any;
        }
       
        let dataLayer = window.dataLayer || [];
        function gtag(a:string, b:string|object){dataLayer.push(arguments);}
                gtag('js', new Date());
                gtag('config', 'UA-XXXXXX-X');

第一个类型定义使用属性“dataLayer”扩展现有窗口接口。（这里的 Windows 带有大写 W）。简单来说，你需要向 Typescript 解释该window对象有一个 property dataLayer。

如果代码片段位于模块内部，则此定义可能有助于在其他模块中使用它：

declare global {
  interface Window {
    dataLayer:any;
  }
}

这里的第二个问题是该函数gtag()看起来有零个参数，但实际上，参数是用变量 捕获的arguments。Typescript 似乎对这种方法视而不见；因此，我们需要定义参数类型。

如果您需要向 GA 发送不同数量的参数，您还可以使用这种广泛的类型定义，除了任意数量的参数（甚至零个参数）：

function gtag(...args: any[]):void {window.dataLayer.push(arguments);}