TypeScript项目引入EventSource polyfill后类型定义未生效问题

核心原因 #

@types/eventsource的类型定义默认没有覆盖浏览器全局EventSource的内置类型（内置类型来自TS标准库lib.dom.d.ts，优先级更高），且你直接导入polyfill子路径时，类型定义无法匹配对应导出的构造函数，才会出现类型报错。

规范解决步骤 #

1. 调整导入方式，不依赖全局变量
   不要用全量导入覆盖全局的方式，显式导入polyfill构造函数，避免和浏览器内置类型冲突：
   首先确保tsconfig.json的compilerOptions开启以下配置：

{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

然后在使用的文件中直接导入整个包，而非子路径：

import EventSourcePolyfill from 'eventsource'

2. 直接使用导入的构造函数，类型会自动匹配
   polyfill的类型定义本身已经支持headers属性，不需要额外扩展全局类型，直接使用即可：

// ref类型直接指定为导入的polyfill类型即可
eventSourceRef.current = new EventSourcePolyfill('/api/foo', { 
  headers: { bar: 'buzz' } 
})

如果你坚持要用全局覆盖的方式 #

可以按以下操作，不需要单独加reference引用：

1. 在tsconfig.json的compilerOptions的types数组中加入eventsource，让TS优先加载polyfill的全局类型：

{
  "compilerOptions": {
    "types": ["eventsource"]
  }
}

2. 在项目入口文件全量导入polyfill：import 'eventsource/lib/eventsource-polyfill'
3. 你之前写的全局EventSourceInit扩展可以删掉，@types/eventsource已经内置了该属性的类型定义。

补充说明 #

你之前导入子路径eventsource/lib/eventsource-polyfill时报错「表达式不可构造」，是因为该子路径的导出格式和@types/eventsource根目录的类型定义不匹配，直接导入根目录的包即可，构建工具会自动适配浏览器环境的polyfill代码。

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