Typescript concat two data types array in one

Question

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 incompatible.

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

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
– captain-yossarian from Ukraine, Commented Aug 17, 2021 at 9:32

bharadhwaj · Accepted Answer · 2021-08-17 09:27:45Z

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];

edited Aug 17, 2021 at 9:27

answered Aug 17, 2021 at 9:13

bharadhwaj

2,14923 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

glushkina1 Over a year ago

hi @bharadhwaj . could you explain why we concat foo: Array<string> and bar Array<number> and got both: string?

bharadhwaj Over a year ago

@glushkina1 Arrays are implicitly meant to hold a single datatype, whereas it is tuples that are allocated for storing different types of datatypes. So when we try to concatinate two arrays typescript just look for the type of the first array and decide the type of the resultant array with that.

Collectives™ on Stack Overflow

Typescript concat two data types array in one

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related