Array.from(it: Iterable<X> | Iterable<Y>) fails; […it] works but returns Array<X | Y>; both should return Array<X> | Array<Y>

🔎 Search Terms

Array.from is currently declared as

from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];

This means that unions of distinct iterable types cannot be turned into arrays of the same type.

let foo: Iterable<string> | Iterable<number> = /* ... */;
let q: Array<string> | Array<number> = Array.from(foo); // Fails type checking, cannot find overload (2769)

The array splat operator has a different problem: it tries to create an array that is a union of both types.

let foo: Iterable<string> | Iterable<number> = /* ... */;
let q: Array<string> | Array<number> = [...foo]; // Fails type checking, not assignable to type (2322)

My instinct is that there should be some way to use variadic types here, but tbh I don't really know how.

Does this need new syntax? Or does it work within the existing type system?

🕗 Version & Regression Information

Since at least 4.0; prior to 4.0 it still fails but Array.from did not support taking an Iterable.

Still around in 6.0.0-dev.20251009

⏯ Playground Link

https://www.typescriptlang.org/play/?ts=5.9.3&ssl=19&ssc=1&pln=11&pc=1#code/PTAEHUFMBsGMHsC2lQBd5oBYoCoE8AHSAZVgCcBLA1UABWgEM8BzM+AVwDsATAGiwoBnUENANQAd0gAjQRVSQAUCEmYKsTKGYUAbpGF4OY0BoadYKdJMoL+gzAzIoz3UNEiPOofEVKVqAHSKymAAmkYI7NCuqGqcANag8ABmIjQUXrFOKBJMggBcISGgoAC0oACCbvCwDKgU8JkY7p7ehCTkVDQS2E6gnPCxGcwmZqDSTgzxxWWVoASMFmgYkAAeRJTInN3ymj4d-jSCeNsMq-wuoPaOltigAKoASgAywhK7SbGQZIIz5VWCFzSeCrZagNYbChbHaxUDcCjJZLfSDbExIAgUdxkUBIursJzCFJtXydajBVDtUAAMXgGAAvKAAJIKMgMaTuAA8glQlE4zAAfKAAD5MllszmcdiIaTffkAbmCyS4sHqjTQZDwFTIrLwVLYiAAFMlaflqbSAJSgADeihKJXcNAAjqatTquTzhoKRa6mBzJdLZaAGT68AFkvqjRaFQBfRXK1WZDXEBZ1SPwU00+CWm12tyQJ0u7W+7m8gXCypFvB+qUysiChkAbQCzeN8AAujHgiocM0PGQvIh4H02RwaF83GZmOwGMxIPxYNB1IkR3oRF4AEQAUVWDEQC3066S2PX4AcqAA5MIAHKQCTroIqADyXzI70Ec60+auqEcClc0jwUAnEHHRhiwfQUAQRBoWES5xwkIdohEAwOGxFMWDYLhuCCEogA

💻 Code

type Foo = Iterable<string> | Iterable<number>;

function tryArrayFrom(foo: Foo) {
    let q: Array<string> | Array<number> = Array.from(foo);
}

function trySplat(foo: Foo) {
    let q: Array<string> | Array<number> = [...foo];
}

🙁 Actual behavior

for tryArrayFrom
No overload matches this call.
Overload 1 of 4, '(iterable: Iterable | ArrayLike): string[]', gave the following error.
Argument of type 'Foo' is not assignable to parameter of type 'Iterable | ArrayLike'.
Type 'Iterable' is not assignable to type 'Iterable | ArrayLike'.
Type 'Iterable' is not assignable to type 'Iterable'.
The types returned by 'Symbol.iterator.next(...)' are incompatible between these types.
Type 'IteratorResult<number, any>' is not assignable to type 'IteratorResult<string, any>'.
Type 'IteratorYieldResult' is not assignable to type 'IteratorResult<string, any>'.
Type 'IteratorYieldResult' is not assignable to type 'IteratorYieldResult'.
Type 'number' is not assignable to type 'string'.
Overload 2 of 4, '(arrayLike: ArrayLike<string | number>): (string | number)[]', gave the following error.
Argument of type 'Foo' is not assignable to parameter of type 'ArrayLike<string | number>'.
Property 'length' is missing in type 'Iterable' but required in type 'ArrayLike<string | number>'.

for trySplat
Type '(string | number)[]' is not assignable to type 'string[] | number[]'.
Type '(string | number)[]' is not assignable to type 'string[]'.
Type 'string | number' is not assignable to type 'string'.
Type 'number' is not assignable to type 'string'.

🙂 Expected behavior

Array.from a union of Iterables should return a union of Arrays.

Additional information about the issue

No response

リンクされた TypeScript Playground で両方の例を再現するところから始め、宣言された Array.from のオーバーロードとスプレッドの挙動を比較してください。Iterable と Iterable のユニオンがどのように推論されるかを調査し、そのうえで、既存の型システムの仕組みで新しい構文なしに Array | Array を生成できるかどうかを判断してください。両方の例が期待されるユニオン型で型チェックされ、関連するリグレッションがカバーされれば完了です。