Why does TypeScript infer the 'never' type when reducing an Array with concat?
Asked Answered
I

7

86

Code speaks better than language, so:

['a', 'b', 'c'].reduce((accumulator, value) => accumulator.concat(value), []);

The code is very silly and returns a copied Array...

TS complains on concat's argument: TS2345: Argument of type 'string' is not assignable to parameter of type 'ConcatArray'.

Intrench answered 9/1, 2019 at 19:33 Comment(0)
F
113

I believe this is because the type for [] is inferred to be never[], which is the type for an array that MUST be empty. You can use a type cast to address this:

['a', 'b', 'c'].reduce((accumulator, value) => accumulator.concat(value), [] as string[]);

Normally this wouldn't be much of a problem since TypeScript does a decent job at figuring out a better type to assign to an empty array based on what you do with it. However, since your example is 'silly' as you put it, TypeScript isn't able to make any inferences and leaves the type as never[].

Fistulous answered 9/1, 2019 at 19:39 Comment(5)
"Why does TypeScript infer the 'never' type?" "because the type for [] is inferred to be never[]". If that was the case then why does const array = []; infer array as type any[]? – Muliebrity
Normally TypeScript does a pretty good job at inferring the proper type for an empty array based on how it is used. However, it isn't able to in this example because it doesn't have any types in the parameters or return type of the callback, and it doesn't use the original ['a', 'b', 'c'] array for type inferencing. Doing something like const array = []; does indeed produce an any[] array. However, I think this is an explicit exception to avoid confusing people. If you do something like [].filter(a => true);, you will see that it infers the never[] type instead of the any[] type. – Fistulous
Relevant: github.com/Microsoft/TypeScript/issues/18687 It's more complicated than I realized, but [] gets inferred as some kind of "widening any[]" type when contextually typed... apparently in a way that doesn't happen when being passed as the accumulator in reduce(). πŸ€·β€β™€οΈ – Marilynnmarimba
@MattH Yes TS isn't able to determine the type of the array, you can either cast or pass the type as a template parameter to reduce then it works ! – Intrench
Just found github.com/microsoft/TypeScript/issues/29795 which could be an authoritative source of the above info – Marilynnmarimba
J
46

A better solution which avoids a type assertion (aka type cast) in two variants:

  1. Use string[] as the generic type parameter of the reduce method (thanks @depoulo for mentioning it):
['a', 'b', 'c'].reduce<string[]>((accumulator, value) => accumulator.concat(value), []);
  1. Type the accumulator value as string[] (and avoid a type cast on []):
['a', 'b', 'c'].reduce((accumulator: string[], value) => accumulator.concat(value), []);

Play with this solution in the typescript playground.

Notes:

  1. Type assertions (sometimes called type casts) should be avoided if you can because you're taking one type and transpose it onto something else. This can cause side-effects since you're manually taking control of coercing a variable into another type.

  2. This typescript error only occurs if the strictNullChecks option is set to true. The Typescript error disappears when disabling that option, but that is probably not what you want.

  3. I reference the entire error message I get with Typescript 3.9.2 here so that Google finds this thread for people who are searching for answers (because Typescript error messages sometimes change from version to version):

    No overload matches this call.
      Overload 1 of 2, '(...items: ConcatArray<never>[]): never[]', gave the following error.
     Argument of type 'string' is not assignable to parameter of type 'ConcatArray<never>'.
      Overload 2 of 2, '(...items: ConcatArray<never>[]): never[]', gave the following error.
     Argument of type 'string' is not assignable to parameter of type 'ConcatArray<never>'.(2769)
    
Jemima answered 23/6, 2020 at 14:54 Comment(2)
This should be the accepted answer. Slightly different solution, using generics: ['a', 'b', 'c'].reduce<string[]>((accumulator, value) => accumulator.concat(value), []); – Priorate
Thank you Andru for your valuable feedback. I too had the same issue; so googled and arrived at your correct answer. – Braw
B
9

You should use generics to address this.

['a', 'b', 'c'].reduce<string[]>((accumulator, value) => accumulator.concat(value), []);

This will set the type of the initial empty array, which in my opinion is the most correct solution.

Boon answered 29/4, 2021 at 6:53 Comment(0)
D
3

You can use Generic type to avoid this error.

Check my example of flatten function:

export const flatten = <T>(arr: T[]): T[] => arr.reduce((flat, toFlatten) =>
  (flat.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten)), [] as T[]);
Digestion answered 8/9, 2022 at 17:5 Comment(0)
G
3

Two other ways to set the type that I like more than type casting (i.e [] as string) is:

  • <string[]>[]
  • Array<string>(0)
Grotius answered 2/12, 2022 at 13:30 Comment(0)
S
1

I had the same problem with the reduce function. The previous answers are okay, but it's also pretty straightforward if you simply create and type the array before you pass it to the function as the second parameter.

const alphabet = ['a', 'b', 'c']
let accumulatorArray: string[] = []

const reduction = alphabet.reduce((acc, curr) => {
    acc.concat(curr)
}, accumulatorArray)
Sheerness answered 27/3, 2023 at 13:50 Comment(0)
P
-4

none of the above worked for me, even with altering the tsconfig.json file to "strict": false and was only able to avoid breaking the application with the following:

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
Plusch answered 16/12, 2021 at 19:33 Comment(1)
This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review – Aesthete

© 2022 - 2024 β€” McMap. All rights reserved.