Implementing reduce for filtering and mapping in TypeScript: A comprehensive guide

Question

Implementing reduce for filtering and mapping in TypeScript: A comprehensive guide

I encountered a problem with my code that I need help fixing. Here is a simple example:

    interface employer {
      name: string;
      age: number;
    }

    const arr: employer[] = [{name:'Amy',age:18},{name:'Bob',age:20}];

    let data = arr.reduce((c, b) =>  b.age > 18 ? [...c, b] : c,[])

    console.log(data)

The goal here is to filter the arr array and return the ages of people who are older than 18. However, I am running into errors:

No overload matches this call.
  Overload 1 of 3, '(callbackfn: (previousValue: employer, currentValue: employer, currentIndex: number, array: employer[]) => employer, initialValue: employer): employer', gave the following error.
    Type 'employer[]' is missing the following properties from type 'employer': name, age
  Overload 2 of 3, '(callbackfn: (previousValue: never[], currentValue: employer, currentIndex: number, array: employer[]) => never[], initialValue: never[]): never[]', gave the following error.
    Type 'employer[]' is not assignable to type 'never[]'.
      Type 'employer' is not assignable to type 'never'.

In the line b.age > 18 ? [...c, b] : c, it seems like it should work in JavaScript. How can we fix this issue? Thank you!

typescript reduce

Answer 1

Answer №1

To resolve this issue, make sure to include the type in the reduce function. You can achieve this by using the following code snippet:

let data = arr.reduce<employer[]>((c, b) =>  b.age > 18 ? [...c, b] : c,[])

Alternatively, you can use:

let data = arr.reduce((c, b) =>  b.age > 18 ? [...c, b] : c,[] as employer[])

Personally, I prefer the first method.

An example demonstrating this solution can be found in the following playground.

Answer 2

To resolve this issue, make sure to include the type in the reduce function. You can achieve this by using the following code snippet:

let data = arr.reduce<employer[]>((c, b) =>  b.age > 18 ? [...c, b] : c,[])

Alternatively, you can use:

let data = arr.reduce((c, b) =>  b.age > 18 ? [...c, b] : c,[] as employer[])

Personally, I prefer the first method.

An example demonstrating this solution can be found in the following playground.

Answer 3

Answer №2

Exploring a different approach

interface employee {
  name: string;
  age: number;
}

const employeesArray: employee[] = [{name:'Amy',age:18},{name:'Bob',age:20}];

let filteredData: employee[] = employeesArray.reduce((accumulator: employee[], currentEmployee: employee) =>  currentEmployee.age > 18 ? [...accumulator, currentEmployee] : accumulator,[])

console.log(filteredData)

Answer 4

Exploring a different approach

interface employee {
  name: string;
  age: number;
}

const employeesArray: employee[] = [{name:'Amy',age:18},{name:'Bob',age:20}];

let filteredData: employee[] = employeesArray.reduce((accumulator: employee[], currentEmployee: employee) =>  currentEmployee.age > 18 ? [...accumulator, currentEmployee] : accumulator,[])

console.log(filteredData)

Implementing reduce for filtering and mapping in TypeScript: A comprehensive guide

Answer №1

Answer №2

Similar questions

Receiving errors in React/TS/material-ui when attempting to use a variable as a value for a grid property. Messages include "No overload matches" and "Type 'number' is not assignable to type..."

Creating a responsive class getter with Vue.js 3 using the Composition API: a guide

How can I create an interceptor in Angular2 to detect 500 and 404 errors in my app.ts file?

What is the best way to locate an item within a Redux array when working with TypeScript?

Error encountered in Node.js OpenAI wrapper: BadRequestError (400) - The uploaded image must be in PNG format and cannot exceed 4 MB

How can I target the initial last element within an *ngFor loop?

In the en-US locale, the toLocaleDateString function is transforming "00:30" into 24:30

Encapsulate the module function and modify its output

Issue: An object with keys {} is not suitable as a React child, causing an error

Issue: Typescript/React module does not have any exported components

Encountering a "Module parse failed" error with type annotations in Nextjs while using Yarn Workspaces

Guide to integrating global interfaces into your Nuxt project

Compile Node.js applications for multiple projects using Grunt

Unable to simulate a service and retrieve information in an angular unit test - showing as undefined

Angular is throwing an error stating that it is unable to access the 'name' property of an undefined object

Adding images to your SVG using Bobril is a simple process that can add visual

An issue has occurred: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[NavbarComponent -> NavbarComponent

Module 'angular2/angular2' not found

Currying disrupts the inference of argument types as the argument list is divided in half, leading to confusion

Combine all TypeScript enums into a single one