React TypeScript项目中DecompressionStream未找到的错误求助

问题详情 #

在React TypeScript项目构建时触发TypeScript错误：

webpack compiled with 1 warning
ERROR in src/App.tsx:30:21
TS2304: Cannot find name 'DecompressionStream'.
    28 | const enc = new TextEncoder()
    29 | const dc  = new TextDecoder()
  > 30 | const gunzip  = new DecompressionStream('gzip')
       |                     ^^^^^^^^^^^^^^^^^^^

纯Node.js脚本（无TypeScript约束）里CompressionStream和DecompressionStream能正常运行，但TypeScript检查或Web构建时就提示找不到名称。试过几种导入方式都没用：

• import { DecompressionStream } from 'compression-streams'
• const DecompressionStream = require('DecompressionStream')
• const DecompressionStream = globalThis.DecompressionStream

查了Web API文档没提到对应的模块名，也找不到匹配的@types包，应该是这个API比较新导致的类型缺失。

可行解决方案 #

1. 升级TypeScript版本 #

DecompressionStream的类型定义是在TypeScript 4.5版本之后才内置的，如果你用的TS版本太低，直接升级到最新稳定版就能解决：

npm install typescript@latest --save-dev
# 用yarn的话
yarn add typescript@latest --dev

2. 调整tsconfig.json的lib配置 #

升级后还是有问题的话，检查tsconfig.json里的compilerOptions.lib数组，确保包含ESNext或者WebWorker（这个API在Worker环境也支持），同时保留DOM：

{
  "compilerOptions": {
    "lib": ["ESNext", "DOM"],
    "target": "ESNext" // 也可以设为ES2022及以上
    // 其他配置项...
  }
}

如果是Node.js环境，确保Node版本在18.0以上（该版本开始支持这个API），同时target配置也要对应上。

3. 手动添加类型声明（兜底方案） #

要是上面两种方法都不管用，就在项目里新建一个类型声明文件，比如src/types/compression-streams.d.ts，内容如下：

interface GenericTransformStream {} // 兼容TS类型检查，实际可根据需要补充

interface DecompressionStream extends GenericTransformStream {
  new(format: 'gzip' | 'deflate' | 'deflate-raw'): DecompressionStream;
}

interface CompressionStream extends GenericTransformStream {
  new(format: 'gzip' | 'deflate' | 'deflate-raw'): CompressionStream;
}

declare global {
  var DecompressionStream: typeof DecompressionStream;
  var CompressionStream: typeof CompressionStream;
}

export {};

添加后TypeScript就能识别这两个全局API的类型了。

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