How can I define Array.reduce method in Typescript?

Question

I have a problem with the reduce method in TypeScript:

const items = {a: 10, b:20, c: 30}
const itemsTotal = Object.keys(items).reduce((accumulator: number, key: keyof typeof items ) => {
    return accumulator + items[key]
  }, 0)

I keep receiving the Typescript error:

Argument of type '(accumulator: number, key: "a" | "b" | "c") => number' is not assignable to parameter of type '(previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string'.
Types of parameters 'accumulator' and 'previousValue' are incompatible.***

It seems that I need to define the type of the reduce method, but how?

T.J. Crowder · Accepted Answer · 2021-12-09 13:36:55Z

2

Object.keys returns a string[], so you can't apply a reducer function that expects a keyof typeof items to it.

You could use a type assertion, since you know it's valid:

const items = {a: 10, b:20, c: 30};
const itemsTotal = Object.keys(items).reduce((accumulator, key) => {
    return accumulator + items[key as keyof typeof items];
}, 0);

Playground

...but you don't need the key anyway, just use Object.values:

const items = {a: 10, b:20, c: 30};
const itemsTotal = Object.values(items).reduce((accumulator, value) => {
    return accumulator + value;
}, 0);

Playground

(But frankly I'd just use a simple loop.)

answered Dec 9, 2021 at 13:36

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

1 Comment

Manzana Over a year ago

Thanks T.J. both of your answers solved my problem. Kudoz to you

Drag13 · Accepted Answer · 2021-12-09 13:34:50Z

1

Not the cleanest solution but you can use this snippet:

const items = { a: 10, b: 20, c: 30 }
const itemsTotal = Object.keys(items).reduce((accumulator, key) => {
    return accumulator + items[key as keyof typeof items]
}, 0)

Key point is to cast key to keyof typeof items

answered Dec 9, 2021 at 13:34

Drag13

6,0281 gold badge22 silver badges44 bronze badges

1 Comment

Manzana Over a year ago

Great answer @Drag13, it solved my problem.

Miroslav Popov · Accepted Answer · 2021-12-09 14:46:04Z

1

Define your items as a Record of string to number. It will be clear for the reduce method that the item is a number.

const items: Record<string, number> = {a: 10, b: 20, c: 30}

const itemsTotal = Object.keys(items).reduce((accumulator: number, key: string) => {
    return accumulator + items[key];
}, 0)

You can also skip the braces in the reduce body.

Object.keys(items).reduce((acc: number, key: string) => acc + items[key], 0)

Even more, you can skip the type designations in the reduce because your items are already defined as numbers in the Record.

Object.keys(items).reduce((acc, key) => acc + items[key], 0)

Edit

You can skip the accumulator initialization. reduce starts from the first item in such a case.

Object.values(items).reduce( (acc, item) => acc + item )

The fastest solution is with for of because there are no function calls:

let sum = 0
for (const item of Object.values(items)) {
   sum += item;
}

edited Dec 9, 2021 at 14:46

answered Dec 9, 2021 at 13:34

Miroslav Popov

3,4034 gold badges37 silver badges60 bronze badges

1 Comment

Miroslav Popov Over a year ago

@Manzana, it is always a good idea to define your objects. Using Record<string, number> defines both the keys and the values.

Collectives™ on Stack Overflow

How can I define Array.reduce method in Typescript?

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related