Support concat operations on arrays of different types

[limbo]

Search Terms

concat, array, type

Suggestion

Currently concat requires that arrays be of similar types (or arrays of arrays of similar type). This requirement can be too strict at times. Since concat doesn't change the source arrays, it seems reasonable to return an array of the union of the input array types.

This can be achieved by adding an overload to Array.concat:

Array<T> {
  concat<U>(...items: (U | ConcatArray<U>)[]): Array<T|U>;
}

Use Cases

Joining dissimilar arrays.

Examples

Simple example below. A more realistic example would probably involve arrays of more complex, type-inferred objects that are mostly similar but slightly different.

const nums=[1,2,3];
const strs = ['a','b','c'];

// Currently, must do something like:
const arr1 = (nums as Array<string|number>).concat(strs);

// With this proposal we can instead use:
const arr2 = nums.concat(strs);

Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript / JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. new expression-level syntax)

Related: #19535

[samends]

Wanted to bump this issue, I would like this feature as well as this is definitely needed in certain situations. Also the issue @Andy-MS linked is related as they are both about concatenating arrays but they are not the same issue. We're talking here about concatenating complex types, as currently this only works with primitive types.

[simonalepinelucidia]

I got the same issue with Angular Routes and Route[].
IMO, it should throw an error as it seems to behave incorrectly.

The following fails
export const ROUTES1: Routes = [
{path: 'route1', component: FirstComponent},
{path: 'route2', component: SecondComponent}
];

export const ROUTES2: Routes = [
{path: 'route3', component: ThirdComponent},
{path: 'route4', component: FourthComponent}
];

export const ALL_ROUTES: Routes = ROUTES1.concat(ROUTES2);

This works fine
export const ROUTES1: Route[] = [
{path: 'route1', component: FirstComponent},
{path: 'route2', component: SecondComponent}
];

export const ROUTES2: Route[] = [
{path: 'route3', component: ThirdComponent},
{path: 'route4', component: FourthComponent}
];

export const ALL_ROUTES: Routes = ROUTES1.concat(ROUTES2);

[RyanCavanaugh]

Rolling into #36554; please post use cases there