Next.js13+TypeScript扩展Window对象与SVG类型定义冲突问题

问题根源在于TypeScript对.d.ts文件的处理规则：

• 不带export/import的.d.ts是全局类型文件，里面的模块声明（比如*.svg）会作用于整个项目。
• 带export/import的.d.ts会变成模块类型文件，内部的全局声明会被限制在模块范围内，导致原来的SVG类型定义失效。

直接按以下步骤拆分类型定义即可解决：

1. 保留原index.d.ts处理SVG类型
   不要在这个文件里加export {}，让它保持全局类型文件的特性，内容示例：

   declare module '*.svg' {
     import React from 'react';
     const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
     export default ReactComponent;
   }
   

2. 新建global.d.ts扩展Window对象
   在根目录创建这个文件，通过export {}将其转为模块环境，再用declare global扩展全局Window接口，内容示例：

   export {};
   
   declare global {
     interface Window {
       // 可根据gtag实际用法定义更精确的类型
       gtag: (...args: any[]) => void;
     }
   }
   

3. 确保tsconfig.json包含所有类型文件
   检查tsconfig.json的include数组，确保根目录下的.d.ts都被包含，默认配置一般已覆盖，若未覆盖则手动添加：

   {
     "include": [
       "next-env.d.ts",
       "**/*.ts",
       "**/*.tsx",
       "./*.d.ts"
     ]
   }
   

这样拆分后，SVG的ReactComponent类型能正常识别，window.gtag也能被TypeScript正确推断类型，两者互不影响。

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