How do I concat two types array in one array using concat. If I initialize it with two data types it works fine but when I concat it. Typescript throws an error that both types are inpatible.

const foo: string[] = ['hello', 'world'];
const bar: number[] = [1, 2];
const both: (string | number)[] = foo.concat(bar); // gets an error on bar

const other: (string | number)[] = ['hello', 'world', 2, 3]; // this works

How do I concat two types array in one array using concat. If I initialize it with two data types it works fine but when I concat it. Typescript throws an error that both types are inpatible.

const foo: string[] = ['hello', 'world'];
const bar: number[] = [1, 2];
const both: (string | number)[] = foo.concat(bar); // gets an error on bar

const other: (string | number)[] = ['hello', 'world', 2, 3]; // this works

• javascript
• arrays
• typescript
• types

Share Follow asked Aug 17, 2021 at 8:59 deathstrokedeathstroke 59377 silver badges1919 bronze badges 1

• Please be aware that array data structure itself should have only one type of elements. What you are trying to create called tuple. Type of each element of the tuple should be typed upfront. const tuple:[string,number]=['str', 42]. Furthermore V8 works better with homogeneous arrays – captain-yossarian from Ukraine Commented Aug 17, 2021 at 9:32

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I think it has to do with the implementation of .concat() in Typescript. It is implemented as the type of the merged array is expected to be the type of foo here. That is the reason it is throwing an error.

You can check the error tab for your code snippet from Typescript Playground here to understand more about this.

If you want to make it work, you can use the spread operator. It should work fine.

const foo: string[] = ['hello', 'world'];
const bar: number[] = [1, 2];
const both: (string | number)[] = [...foo, ...bar];