Upgrading to Typescript 4.4 results in error TS2345 when using web-streams-polyfill

[bjornharrtell]

I get error like this:

error TS2345: Argument of type 'ReadableStream' is not assignable to parameter of type 'string | ReadableStream | Uint8Array'.
Type 'import("/home/bjorn/code/flatgeobuf/node_modules/web-streams-polyfill/dist/types/ts3.6/polyfill").ReadableStream' is not assignable to type 'ReadableStream'.

[MattiasBuelens]

Could you share some example code, or a minimal reproduction case? I'm not sure which function you're calling that accepts a string | ReadableStream | Uint8Array argument.

That said, I do have a test for this specific case, but I had to disable it a while ago because of some mismatches. I'll see if I can re-enable it. 🙂

[bjornharrtell]

Thanks for the fix @MattiasBuelens and sorry I couldn't provide more info. I'll be sure to test it when possible.

[MattiasBuelens]

Uhoh, looks like there's more to this. I've only fixed the issues with the version of TypeScript that I was using in this project (4.2), but TypeScript 4.4 has more incompatibilities.

I'll see what I can do.

[MattiasBuelens]

Currently, the tests find 4 type errors:

npm run test:types

> web-streams-polyfill@3.1.0 test:types C:\path\to\web-streams-polyfill
> tsc -p ./test/types/tsconfig.json

test/types/queuing-strategy.ts:11:7 - error TS2322: Type 'import("C:/path/to/web-streams-polyfill/dist/types/ts3.6/polyfill").ByteLengthQueuingStrategy' is not assignable to type 'ByteLengthQueuingStrategy'.
  Types of property 'size' are incompatible.
    Type '(chunk: ArrayBufferView) => number' is not assignable to type 'QueuingStrategySize<ArrayBufferView>'.
      Types of parameters 'chunk' and 'chunk' are incompatible.
        Type 'ArrayBufferView | undefined' is not assignable to type 'ArrayBufferView'.
          Type 'undefined' is not assignable to type 'ArrayBufferView'.

11 const domByteLengthStrategy: ByteLengthQueuingStrategy = byteLengthStrategy;
         ~~~~~~~~~~~~~~~~~~~~~

test/types/readable-stream.ts:126:7 - error TS2741: Property 'forEach' is missing in type 'import("C:/path/to/web-streams-polyfill/dist/types/ts3.6/polyfill").ReadableStream<string>' but required in type 'ReadableStream<string>'.

126 const domReadableStream: ReadableStream<string> = readableStream;
          ~~~~~~~~~~~~~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:11986:5
    11986     forEach(callbackfn: (value: any, key: number, parent: ReadableStream<R>) => void, thisArg?: any): void;
              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    'forEach' is declared here.

test/types/readable-stream.ts:127:7 - error TS2741: Property 'forEach' is missing in type 'import("C:/path/to/web-streams-polyfill/dist/types/ts3.6/polyfill").ReadableStream<Uint8Array>' but required in type 'ReadableStream<Uint8Array>'.

127 const domReadableByteStream: ReadableStream<Uint8Array> = readableByteStream;
          ~~~~~~~~~~~~~~~~~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:11986:5
    11986     forEach(callbackfn: (value: any, key: number, parent: ReadableStream<R>) => void, thisArg?: any): void;
              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    'forEach' is declared here.

test/types/transform-stream.ts:30:7 - error TS2322: Type 'import("C:/path/to/web-streams-polyfill/dist/types/ts3.6/polyfill").TransformStream<string, number>' is not assignable to type 'TransformStream<string, number>'.
  Types of property 'readable' are incompatible.
    Property 'forEach' is missing in type 'import("C:/path/to/web-streams-polyfill/dist/types/ts3.6/polyfill").ReadableStream<number>' but required in type 'ReadableStream<number>'.

30 const domTransformStream: TransformStream<string, number> = transformStream;
         ~~~~~~~~~~~~~~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:11986:5
    11986     forEach(callbackfn: (value: any, key: number, parent: ReadableStream<R>) => void, thisArg?: any): void;
              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    'forEach' is declared here.


Found 4 errors.

• Error 1 appears to be a small mistake in the Web IDL definition of the Streams specification itself. I've filed Remove optional from chunk parameter in QueuingStrategySize whatwg/streams#1164 to fix it, but it will probably take a while before this fix finds its way into TypeScript's DOM types.
• Error 2, 3 and 4 are a problem with TypeScript's DOM types. ReadableStream incorrectly has a forEach() method, which doesn't actually exist in the specification. I've fixed it upstream in Fix ReadableStream incorrectly marked as a sync iterable microsoft/TypeScript-DOM-lib-generator#1134, but again it'll take some time before that ships in a new version of TypeScript.

If I fix the chunk parameter and remove the faulty forEach() in my local TypeScript installation, I get a different error instead:

npm run test:types after local fix

test/types/readable-stream.ts:126:7 - error TS2322: Type 'import("C:/path/to/dist/types/ts3.6/polyfill").ReadableStream<string>' is not assignable to type 'ReadableStream<string>'.
  Types of property 'pipeThrough' are incompatible.
    Type '<T>(transform: import("C:/path/to/dist/types/ts3.6/polyfill").ReadableWritablePair<T, string>, options?: import("C:/path/to/dist/types/ts3.6/polyfill").StreamPipeOptions | un
defined) => import("C:/Users/Mattias/Documents/Git/web-stream...' is not assignable to type '<T>(transform: ReadableWritablePair<T, string>, options?: StreamPipeOptions | undefined) => ReadableStream<T>'.
      Types of parameters 'transform' and 'transform' are incompatible.
        Type 'ReadableWritablePair<T, string>' is not assignable to type 'ReadableWritablePair<T | undefined, string>'.
          Types of property 'readable' are incompatible.
            Type 'ReadableStream<T>' is missing the following properties from type 'ReadableStream<T | undefined>': values, [Symbol.asyncIterator]

126 const domReadableStream: ReadableStream<string> = readableStream;
          ~~~~~~~~~~~~~~~~~

This one's more difficult... pipeThrough() takes a pair of readable and writable streams, pipes to the writable end and returns the readable end as-is. But TypeScript doesn't know that: for all it cares, the returned ReadableStream could be a completely different instance than the one given through the pair. So I have to somehow convince TypeScript that the return type will have the same type as the original readable end... 🤔 (Update 2021/09/06: I believe cf82b45 fixes this.)

Either way, you'll still need to wait for the upstream fixes to land before the polyfill ReadableStream's type will be fully compatible with TypeScript's ReadableStream type. For now, I'm afraid you'll have to sprinkle some as unknown as ReadableStream<R> around your code to appease the type checker. Sorry for the inconvenience. 😞

[MattiasBuelens]

This should be fixed now. All type compatibility tests for ReadadableStream are passing with web-streams-polyfill version 3.3.0 and TypeScript 5.3.3. 🙂