导入DecompressionStream模块

Question

在我的 React 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')
       |                     ^^^^^^^^^^^^^^^^^^^

当我在没有 TypeScript 的情况下运行 Node 脚本时，没有问题。 CompressionStream 和 DecompressionStream 存在。但似乎当 TypeScript 检查它时（或者是因为它被构建为一个 Web 应用程序？），它认为我们需要导入/需要某些东西。

我已经测试了以下导入语句的变体，但没有成功。

• import { DecompressionStream } from 'compression-streams'

• const DecompressionStream = require('DecompressionStream')

• const DecompressionStream = globalThis.DecompressionStream

我找到的所有关于 CompressionStreams API 的网络文档都没有提到任何模块名称，所以我可能遗漏了一些东西。我还寻找过 Typescript

@types/

模块，但似乎没有——也许这个 Web API 太新了？

Answer 1

这并不是缺少类型定义（或者不仅仅是缺少类型定义）。相反，TypeScript 正在保护我们，因为截至 2023 年 3 月 19 日，Firefox 和 Safari 都没有 CompressionStream 或 DecompressionStream（9 月更新：现在它们有了！）。因此，它不被认为在

globalThis

中（即使它在 Node 的

globalThis

中）。

现在，继续使用众多压缩包之一。我选择了

pako

，它确实有效。

Answer 2

在 Angular Typescript 中

new (window as any).CompressionStream('gzip')

可以工作，但更好的解决方案是将定义添加到使用 CompressionStream 的文件中

interface CompressionStream extends GenericTransformStream {  }
type CompressionFormat = "deflate" | "deflate-raw" | "gzip";
declare var CompressionStream: {
  prototype: CompressionStream;
  new(format: CompressionFormat): CompressionStream
}