[@types/node] ReadableStream type definition here is not compatible with TypeScript's

[suerta-git]

This will fail since types are incompatible

const response = await fetch('xxx')
stream.Readable.fromWeb(response.body!)  // fail!

Error:

Argument of type 'ReadableStream<Uint8Array>' is not assignable to parameter of type 'ReadableStream<any>'.
  Type 'ReadableStream<Uint8Array>' is missing the following properties from type 'ReadableStream<any>': values, [Symbol.asyncIterator]

Node's version:

DefinitelyTyped/types/node/stream/web.d.ts

Line 135 in 16a2bef

interface ReadableStream<R = any> {

TypeScript's version in lib.dom.d.ts:

https://github.com/microsoft/TypeScript/blob/b53073bf66571b4c99f0a93b8f76fb06b36d8991/lib/lib.dom.d.ts#LL11917C1-L11917C1

[typescript-bot]

Thanks for the discussion about "node", some useful links for everyone:

• npm
• DT
• Related discussions

Pinging the DT module owners: @microsoft, @DefinitelyTyped, @jkomyno, @alvis, @r3nya, @btoueg, @smac89, @Touffy, @DeividasBakanas, @eyqs, @Hannes-Magnusson-CK, @hoo29, @kjin, @ajafff, @islishude, @mwiktorczyk, @mohsen1, @n-e, @galkin, @parambirs, @eps1lon, @SimonSchick, @ThomasdenH, @WilcoBakker, @wwwy3y3, @samuela, @kuehlein, @bhongy, @chyzwar, @trivikr, @yoursunny, @qwelias, @ExE-Boss, @peterblazejewicz, @addaleax, @victorperin, @ZYSzys, @nodejs, @LinusU, @wafuwafu13, @mcollina, @Semigradsky.

[Semigradsky]

What's the TypeScript version?

[peterblazejewicz]

looks like 4.4 or older, as per history for the file linked:
https://github.com/microsoft/TypeScript/commits/b53073bf66571b4c99f0a93b8f76fb06b36d8991/lib/lib.dom.d.ts
@suerta-git ?

[suerta-git]

"typescript": "^5.0.2"
"@types/node": "^20.2.1"

[Semigradsky]

Looks like related to microsoft/TypeScript#29867

[wangzishi]

Yes, it is indeed related to this problem. the ReadableStream interface definition in the lib.dom.ts file generated by typescript is missing [Symbol.asyncIterator](): AsyncIterableIterator<R>; which is supported by Nodejs.

[Semigradsky]

@julienvincent @wangzishi Please, take a look

[wangzishi]

I'll have a look at it this weekend.

[wangzishi]

The root cause of this problem is that typescript has removed the type definition that generates the async
iterator for ReadableStream. They also did this because chromium has never implemented this functionality, but
Nodejs already implements this, so the type definition difference is caused.

My personal advice is as follows:

1. if the code only runs in Nodejs, then do the type casting directly:

import { default as stream } from 'node:stream'.
import type { ReadableStream } from 'node:stream/web'.

const response = await fetch('xxx')
stream.Readable.fromWeb(response.body as ReadableStream<Uint8Array>)

2. If the code needs to take into account the browser's runtime environment, you can add a polyfill:

ReadableStream.prototype[Symbol.asyncIterator] = async function* () {
  const reader = this.getReader()
  try {
    while (true) {
      const {done, value} = await reader.read()
      if (done) return
      yield value
    }
  }
  finally {
    reader.releaseLock()
  }
}

中文说明

导致这个问题的根本原因是因为 typescript 移除了为 ReadableStream 生成 async iterator 的类型定义。他们这么做也是因为 chromium 对此功能的一直没有实现。 而 Nodejs 中的已经实现了这个功能，所以导致了两者的类型定义差异。

我的个人有如下建议：

1. 如果的代码只在 Nodejs 中运行，那么直接做类型转换：

import { default as stream } from 'node:stream';
import type { ReadableStream } from 'node:stream/web';

const response = await fetch('xxx')
stream.Readable.fromWeb(response.body as ReadableStream<Uint8Array>)

2. 如果代码需要考虑到浏览器的运行环境，可以添加一个 polyfill：

ReadableStream.prototype[Symbol.asyncIterator] = async function* () {
  const reader = this.getReader()
  try {
    while (true) {
      const {done, value} = await reader.read()
      if (done) return
      yield value
    }
  }
  finally {
    reader.releaseLock()
  }
}

[suerta-git]

Thanks @wangzishi, the reason of the removal of async iterator makes sense. But just making a type casting is not reasonable enough for me.

Considering all my code runs in Node.js environment. Both of fetch api and ReadableStream class are implemented by Node itself. So the underlying type of fetch()'s return value should be definitely same as ReadableStream as what Readable.fromWeb() expects. And expecting the code snippet can work is also natural for developers.

However typescript prevents it and requires a type casting, it's weird and counterintuitive for me.

Rough ideas:

1. An optional type overriding, makes web apis return node version ReableStreams.
2. Is the async iterator necessary for Readable.fromWeb()? If no, doesn't require it in parameter any more.

[TechQuery]

Recommend a polyfill package: https://github.com/MattiasBuelens/web-streams-polyfill

[beorn]

Would be nice to bump this up in priority for Chrome and WebKit - with streams gaining popularity and being standard, it is a shame you can't use idiomatic for await looping over streams:

• https://bugs.chromium.org/p/chromium/issues/detail?id=929585
• https://bugs.webkit.org/show_bug.cgi?id=194379

[steve-taylor]

The root cause of this problem is that typescript has removed the type definition that generates the async iterator for ReadableStream. They also did this because chromium has never implemented this functionality, but Nodejs already implements this, so the type definition difference is caused.

My personal advice is as follows:

1. if the code only runs in Nodejs, then do the type casting directly:

import { default as stream } from 'node:stream'.
import type { ReadableStream } from 'node:stream/web'.

const response = await fetch('xxx')
stream.Readable.fromWeb(response.body as ReadableStream<Uint8Array>)

2. If the code needs to take into account the browser's runtime environment, you can add a polyfill:

ReadableStream.prototype[Symbol.asyncIterator] = async function* () {
  const reader = this.getReader()
  try {
    while (true) {
      const {done, value} = await reader.read()
      if (done) return
      yield value
    }
  }
  finally {
    reader.releaseLock()
  }
}

中文说明

Cannot find module 'node:stream/web' or its corresponding type declarations. ts(2307)