TypeScript动态导入whatwg-fetch类型报错及@types安装后重复定义问题

我之前也踩过TS 2.7和whatwg-fetch类型冲突的坑，结合我当时的解决经验，给你几个靠谱的方案：

先搞懂问题根源 #

TS 2.7的lib.dom.d.ts里提供了全局Fetch API的类型（比如window.fetch的类型），但并没有内置whatwg-fetch这个模块本身的类型定义。当你动态导入whatwg-fetch模块时，TS找不到对应的模块声明，就会抛出TS7016错误。而安装@types/whatwg-fetch后，这个类型包既包含模块类型，又会扩展全局类型，和TS内置的全局Fetch类型撞车，导致大量重复定义错误。

解决方法1：用全局Fetch，跳过模块导入 #

如果你只是需要在浏览器环境用fetch（whatwg-fetch polyfill会自动挂载到window上），完全没必要导入模块使用：

// 直接用全局fetch，TS会自动从lib.dom识别类型
fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data));

要是需要确保polyfill加载，在入口文件顶部静态导入一次就行，不用管导出的变量：

// 比如index.ts入口文件
import 'whatwg-fetch'; // 仅加载polyfill，不使用模块导出内容

这样TS不会检查模块类型，还能用上内置的全局类型，完美避开冲突。

解决方法2：自定义模块声明，兼顾动态导入和类型不冲突 #

如果必须动态导入whatwg-fetch（比如按需加载polyfill），可以这么做：

1. 先卸载冲突的@types/whatwg-fetch：

npm uninstall @types/whatwg-fetch --save-dev

2. 在项目里新建一个自定义类型文件，比如src/typings/whatwg-fetch.d.ts，手动给模块加声明，复用全局类型避免重复：

// src/typings/whatwg-fetch.d.ts
declare module 'whatwg-fetch' {
  // 导出fetch方法，直接用全局的类型定义
  export function fetch(input: RequestInfo, init?: RequestInit): Promise<Response>;
  // 按需导出其他需要的类型，都复用全局的
  export type Headers = globalThis.Headers;
  export type Request = globalThis.Request;
  export type Response = globalThis.Response;
}

3. 确保TS能识别这个自定义类型目录，在tsconfig.json里配置：

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types", "./src/typings"]
  }
}

之后动态导入whatwg-fetch时，TS就会用你自定义的模块声明，和全局类型也不会冲突了。

解决方法3：移除全局DOM类型（不推荐，仅特殊场景用） #

如果你想完全依赖@types/whatwg-fetch的类型，不想用TS内置的全局类型：

1. 安装@types/whatwg-fetch：

npm install @types/whatwg-fetch --save-dev

2. 修改tsconfig.json，从lib里移除dom，避免全局类型冲突：

{
  "compilerOptions": {
    "lib": ["es2017", "esnext"] // 删掉dom，只保留你需要的JS标准库
  }
}

但这么做会丢失所有DOM相关的类型，只适合非浏览器环境或者你手动管理所有DOM类型的场景，一般不推荐。

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