Type definition for the Array.prototype.reduce()

TypeScript Version: 3.5.1

Search Terms: reduce, es5.d.ts

Code

As currently defined in lib/lib.es5.d.ts:

reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
reduce<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U;

It could be extended by

reduce<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U): U;

to work properly in the cases, when initialValue is not supplied and a value that results from a reduction has different type from reducing array elements.

[dragomirtitian]

That overload would not really be correct since for the first iteration previousValue would be of type T only for the second would it be of type U.

A more accurate type for previousValue would be T | U, but that would create a problem inferring U from the body of the callback (as you need to know the parameter type before you infer the return type of the callback), so this hypothetical callback would only be useful with an explicit type parameter, which is less than ideal:

interface Array<T> {
    reduce<U>(callbackfn: (previousValue: T | U , currentValue: T, currentIndex: number, array: T[]) => U): U;
}

let r = [1, 2, 3, 4].reduce<string>((pv, cv) => {
    return cv.toString();
});

// Or using return type inference
let r2: string = [1, 2, 3, 4].reduce((pv, cv) => {
    return cv.toString();
});

// No annotation we fall back to unknown 
let r3 = [1, 2, 3, 4].reduce((pv, cv) => {
    return cv.toString();
});

play

[RyanCavanaugh]

Treating this as a question. In general if you're touching the extremely complex lib functions like reduce, concat, etc, you need to have a very large test bed of examples to show that the proposed signature doesn't break anything. Conversely, there should be many concrete examples of which calls you're trying to enable.

[onlyanegg]

I came across a use case for this while trying to join strings with react components similar to answers here.

This gives me type errors

{['some', 'strings'].reduce((full, cur) => (
  <>
    {full}
    <br />
    {cur}
  </>
))}

This is a workaround I've found

{['some', 'strings'].map(item => <>{item}</>).reduce((full, cur) => (
  <>
    {full}
    <br />
    {cur}
  </>
))}