Tips for implementing a multi-layered accumulation system with the reduce function

Question

Tips for implementing a multi-layered accumulation system with the reduce function

Consider the following scenario:

const elements = [
    { fieldA: true },
    { fieldB: true },
    { fieldA: true, fieldB: true },
    { fieldB: true },
    { fieldB: true },
];

const [withFieldA, withoutFieldA] = elements.reduce(
    (acc, entry) => {
        const { fieldA } = entry;

        const hasField = Boolean(fieldA);

        return acc[+!hasField].push(entry) && acc;
    },
    [[], []],
);

console.log('withFieldA', withFieldA);
console.log('withoutFieldA', withoutFieldA);

This code is functional, but TypeScript errors are being encountered.

An attempt was made to,

type TElement = {
    fieldA?: boolean;
    fieldB?: boolean;
}

const elements = [
    { fieldA: true },
    { fieldB: true },
    { fieldA: true, fieldB: true },
    { fieldB: true },
    { fieldB: true },
] as TElement[]

const [withFieldA, withoutFieldA]: [TElement[], TElement[]] = elements.reduce(
. . . . .

However, that solution did not work.

What would be the correct way to type this?

Typescript Playground

javascript typescript

Answer 1

Answer №1

To properly handle your data, consider using an array of arrays such as EntityType[][]

Check out this Typescript Playground without any errors

Answer 2

To properly handle your data, consider using an array of arrays such as EntityType[][]

Check out this Typescript Playground without any errors

Answer 3

Answer №2

You are facing two main issues:

The type of your accumulator cannot be inferred by Typescript
You are returning an integer instead of the accumulator itself

1. Specify a type for your accumulator

const [withFieldA, withoutFieldA] = elements.reduce(
    (acc, entry: TElement) => {
      // code
    },
    [[], []] as [TElement[], TElement[]], // <-- make sure to include this type annotation
);

2. Simplify your return statements

The following return statement is unclear

return acc[+!hasField].push(entry) && acc;

. In this case, push returns the new length of the array, hence you are actually returning a number rather than the accumulator itself.

const [withFieldA, withoutFieldA] = elements.reduce(
    (acc, entry: TElement) => {
        const {
            fieldA
        } = entry;

        const hasField = Boolean(fieldA);
        acc[+!hasField].push(entry); // push first
        return acc; // then return
    },
    [[], []] as [TElement[], TElement[]],
);

typescript playground

Answer 4

You are facing two main issues:

The type of your accumulator cannot be inferred by Typescript
You are returning an integer instead of the accumulator itself

1. Specify a type for your accumulator

const [withFieldA, withoutFieldA] = elements.reduce(
    (acc, entry: TElement) => {
      // code
    },
    [[], []] as [TElement[], TElement[]], // <-- make sure to include this type annotation
);

2. Simplify your return statements

The following return statement is unclear

return acc[+!hasField].push(entry) && acc;

. In this case, push returns the new length of the array, hence you are actually returning a number rather than the accumulator itself.

const [withFieldA, withoutFieldA] = elements.reduce(
    (acc, entry: TElement) => {
        const {
            fieldA
        } = entry;

        const hasField = Boolean(fieldA);
        acc[+!hasField].push(entry); // push first
        return acc; // then return
    },
    [[], []] as [TElement[], TElement[]],
);

typescript playground

Tips for implementing a multi-layered accumulation system with the reduce function

Answer №1

Answer №2

1. Specify a type for your accumulator

2. Simplify your return statements

Similar questions

include the parent DOM element's class into its child element

Attempting to convert PHP tables into PDF format by utilizing jsPDF-auto-table to generate a beautifully structured PDF file containing the results of a PHP query with multiple records

The function canvas.toDataURL() is not recognized - error originating from a node-webGL wrapper

Determine the cost for every individual line

What is the outcome of using VueUse.useMouse() if it is not made reactive?

Using JavaScript to sort through JSON data arrays

MUI input remains static and unaltered

Navigate through FAQ items with sliders using Owl Carousel 2 - Easily switch between different chapters

Showcasing pictures with a prominent large image accompanied by two smaller ones on the right side

What is the correct method for typing a React functional component with properties?

Alter the content of a div depending on the values of three different elements

What is the best way to display a jQuery UI dialog when the page is reloaded?

Price Adjuster Tracker

Steps to fix ESlint warning: Avoid using assignment in return Statement (no-return-assign)

What is the reason that certain functionalities do not work on an element that has two CSS classes assigned to it

Creating a dynamic step animation with jQuery: A step-by-step guide

obtaining the value of an input using typescript (put request)

The node module.exports in promise function may result in an undefined return value

Learn how to render a single element with multiple child elements within separate `<td>` tags in a table row using React

Combining the Powers of Express.js and Kue.js