TypeScript实现用户同意后触发GA4统计的报错如何解决

报错原因 #

两个报错的核心诱因如下：

1. 安装@types/gtag.js后TypeScript未正确加载全局类型定义，无法识别window.dataLayer属性
2. 你代码中自定义的无参gtag函数覆盖了@types/gtag.js提供的官方类型声明，导致参数校验不通过

解决步骤 #

• 第一步：调整tsconfig.json配置
  打开项目根目录的tsconfig.json，确保compilerOptions配置符合以下要求：

  • 如果显式配置了types数组，需要添加gtag.js条目
  • 如果配置了typeRoots，需要包含默认的node_modules/@types路径
    示例配置片段：

  {
    "compilerOptions": {
      "types": ["gtag.js"],
      "typeRoots": ["node_modules/@types"]
    }
  }
  

  如果你没有手动配置过types和typeRoots项，可以跳过这一步，TypeScript默认会自动加载node_modules/@types下所有类型包的声明。

• 第二步：删除自定义的gtag函数声明
  你代码中写的function gtag(){dataLayer.push(arguments);}属于冗余代码，@types/gtag.js已经全局声明了gtag方法的类型和入参规则，你自定义的无参函数会覆盖官方类型，才会出现「期望0个参数却得到2个」的报错，直接删除这段声明即可。

• 第三步：补充全局类型兜底（可选）
  如果调整完tsconfig配置后仍存在window.dataLayer的报错，可以在项目中新增全局类型声明文件（例如src/global.d.ts），添加以下内容：

  interface Window {
    dataLayer: any[];
  }
  

  新增后确保该文件在tsconfig.json的include数组覆盖范围内即可。

修正后完整代码 #

// 非空判断避免DOM不存在时的运行时报错
document.querySelector('.cookie')?.addEventListener('click', function(){
  const ga = document.createElement('script')
  ga.type = 'text/javascript'
  ga.async = true
  ga.src = `${window.location.protocol === 'https:' ? 'https://ssl' : 'http://www'}.googletagmanager.com/gtag/js?id=UA-XXXXXX-X`
  const firstScript = document.getElementsByTagName('script')[0];
  firstScript.parentNode?.insertBefore(ga, firstScript);

  window.dataLayer = window.dataLayer || [];
  // 直接使用@types声明的gtag方法即可
  gtag('js', new Date());
  gtag('config', 'UA-XXXXXX-X');
  setCookie('cookie','1',365);
  return false;
})

注：如果setCookie是你自定义的工具函数，需要确保它有对应的类型声明，否则会触发额外的TS报错。

内容的提问来源于stack exchange，提问作者Radim