Learn how to specify types for the accumulated value and initial value when using the reduce function with an array in TypeScript

Question

Learn how to specify types for the accumulated value and initial value when using the reduce function with an array in TypeScript

I am currently running this code on the typescriptlang.org (typescript playground)

After learning about the importance of types in TypeScript and how to use them in functions, I am having trouble adding specific types within this reduce method:

// Types for car
type Car = {
 name:string,
 age:number,
 registered: boolean
};

// Reduce function to calculate the total number of registered cars.

function totalRegisteredCars(cars:Car[]) {
 cars.reduce((acc:number , car:Car) => {
    if(car.registered === true ) {
        acc + 1;
    }
 },0);
}

var cars = [
{name:'vw' , age: 30, registered: true},
{name:'vw' , age: 32, registered: true},
{name:'Merc' , age: 25, registered: false},
{name:'bmw', age: 20, registered: false},
{name:'bmw' , age: 21, registered: true},
{name: 'ford', age: 31, registered: false},
{name: 'pinto', age: 43, registered: false},
{name: 'uno', age: 41, registered: true},
{name: 'ford', age: 30, registered: true},
{name: 'Mustang', age: 19, registered: false}
];

console.log(totalRegisteredCars(cars));

When testing this on https://www.typescriptlang.org/play, I encountered the following error:

Error message

No overload matches this call. Overload 1 of 3, '(callbackfn: (previousValue: Car, currentValue: Car, currentIndex: number, array: Car[]) => Car, initialValue: Car): Car', gave the following error.

Argument of type '(acc: number, car: Car) => void' is not assignable to parameter of type '(previousValue: Car, currentValue: Car, currentIndex: number, array: Car[]) => Car'. Types of parameters 'acc' and 'previousValue' are incompatible. Type 'Car' is not assignable to type 'number'.

Overload 2 of 3, '(callbackfn: (previousValue: number, currentValue: Car, currentIndex: number, array: Car[]) => number, initialValue: number): number', gave the following error. Argument of type '(acc: number, car: Car) => void' is not assignable to parameter of type '(previousValue: number, currentValue: Car, currentIndex: number, array: Car[]) => number'. Type 'void' is not assignable to type 'number'.

Question

Although I have specified my accumulator as a number and car as Car, why does the compiler show the above error?

I would like to understand why I cannot set a type to my accumulator as a number and how to properly assign types within a reduce function in the future.

javascript typescript types model reduce

Answer 1

Answer №1

The error occurs due to an issue in your reduce callback implementation. The callback should return the result of the reduce operation after iterating through every element in the array.

function totalRegisteredCars(cars: Car[]) {
 cars.reduce((acc:number , car:Car) => {
    let newReducedValue = acc;
    if(car.registered === true ) {
        newReducedValue = acc + 1;
    }
    return newReducedValue;
 }, 0);
}

To simplify the code, you can rewrite it like this:

cars.reduce((acc: number, car: Car) => acc + car.registered ? 1 : 0, 0);
// or simply use car.registered alone as JS will convert it to a number

Another observation is that the type signature of totalRegisteredCars is actually (cars: Car[]) => void, indicating no return statement in the function which reduces the array of Cars to a single number with no further action taken.

If your intention was to return a number from totalRegisteredCars function (and then log it), you should specify the return type explicitly:

function totalRegisteredCars(cars: Car[]): number {

This update will prompt a new error message:

A function whose declared type is neither 'void' nor 'any' must return a value. (2355)

In response, we rectify our code to align with the intended functionality while appreciating the benefits of TypeScript for providing such insights.

function totalRegisteredCars(cars: Car[]): number {
  return cars.reduce((acc, car) => acc + car.registered ? 1 : 0, 0);
}

In my latest example, I omitted type declarations within the lambda functions as the types are inferred based on context - the type of car matches cars, and the type of acc corresponds to the second argument of reduce: 0.

Lastly, if your goal is simply to count the registered cars in your array, a more straightforward approach could be:

cars.filter(car => car.registered).length

Answer 2

The error occurs due to an issue in your reduce callback implementation. The callback should return the result of the reduce operation after iterating through every element in the array.

function totalRegisteredCars(cars: Car[]) {
 cars.reduce((acc:number , car:Car) => {
    let newReducedValue = acc;
    if(car.registered === true ) {
        newReducedValue = acc + 1;
    }
    return newReducedValue;
 }, 0);
}

To simplify the code, you can rewrite it like this:

cars.reduce((acc: number, car: Car) => acc + car.registered ? 1 : 0, 0);
// or simply use car.registered alone as JS will convert it to a number

Another observation is that the type signature of totalRegisteredCars is actually (cars: Car[]) => void, indicating no return statement in the function which reduces the array of Cars to a single number with no further action taken.

If your intention was to return a number from totalRegisteredCars function (and then log it), you should specify the return type explicitly:

function totalRegisteredCars(cars: Car[]): number {

This update will prompt a new error message:

A function whose declared type is neither 'void' nor 'any' must return a value. (2355)

In response, we rectify our code to align with the intended functionality while appreciating the benefits of TypeScript for providing such insights.

function totalRegisteredCars(cars: Car[]): number {
  return cars.reduce((acc, car) => acc + car.registered ? 1 : 0, 0);
}

In my latest example, I omitted type declarations within the lambda functions as the types are inferred based on context - the type of car matches cars, and the type of acc corresponds to the second argument of reduce: 0.

Lastly, if your goal is simply to count the registered cars in your array, a more straightforward approach could be:

cars.filter(car => car.registered).length

Learn how to specify types for the accumulated value and initial value when using the reduce function with an array in TypeScript

Answer №1

Similar questions

Handling JSON Data in JavaScript

having difficulty sending the username and password from the HTML page to the controller in AngularJS

Handling error reporting using JSON in jQuery AJAX post success

Managing arrayBuffer in hapi.js: A Comprehensive Guide

Exploring Jasmine's Powerful Spying and Mocking Capabilities in JavaScript Prototypes

Unexpected Quote Will Not Appear

Can halting an ajax function mid-process prevent it from finishing?

Having trouble with the AWS S3 getSignedUrl looping function?

Utilizing Azure SDK to send an email

Capture the responseBody data within a Newman script from a Postman collection and save it to a

Utilizing Async/Await to Streamline Google Maps Elevation Requests

What is the best way to utilize the $('input').on('change', function() method within AngularJS?

Creating a string from values in a multidimensional array by utilizing parent-child relationships and generating dynamic SQL queries

React Router Error: Hook call invalid. Remember to only use hooks inside the body of a function component

Intercept Axios Responses - Retrieving API Responses for HTTP Statuses that are not in the 200 range

Using d3.js to showcase a horizontal stacked bar chart demonstration

What is the method in JavaScript for a child function to trigger a Return statement in its parent function?

Transferring information among various instances of a single controller (ng-controller)

Node.js application hosted on Google App Engine is not including cookies in the HTTP header

Bugs may occur when using the Google Chart API with varying data arrays despite using the same options