What is the correct way to implement TypeScript with Array.prototype.reduce?

I am facing a challenge with my reduce function and I have tried multiple solutions without success:

interface ITask {
  id: string;
  was: string;
}
//sampleData:
const tasks = [
   {id: "a", was: "Foo"}, 
   {id: "b", was: "Foo"}, 
   {id: "c", was: "Bad"}
]; 
const uniqueList = tasks.reduce<>((acc, current) => {
  const x = acc.find((item: ITask) => item.was === current.was);
  return !x ? acc.concat(current) : acc;
}, []);

This results in the following errors:

Property 'find' does not exist on type 'never'.
Property 'was' does not exist on type 'never'.
Property 'concat' does not exist on type 'never'.

The issue appears to be related to the types involved, where current is of type ITask and the accumulator is of type ITask[]|[]. To address this, I attempted:

const uniqueList = tasks.reduce<>((acc: ITask[] | [], current: ITask) => {
  const x = acc.find((item: ITask) => item.was === current.was);
  return !x ? acc.concat(current) : acc;
}, []);

However, I encountered the following error:

Argument of type '(acc: ITask[] | [], current: ITask) => ITask[]' is not assignable to parameter of type '(previousValue: never, currentValue: never, currentIndex: number, array: never[]) => never'.
  Type 'ITask[]' is not assignable to type 'never'.
Argument of type 'ITask' is not assignable to parameter of type 'ConcatArray<never>'.
  Type 'ITask' is missing the following properties from type 'ConcatArray<never>': length, join, slice

As suggested in the comments, I tried:

const uniqueList = tasks.reduce((acc, current: ITask) => {
  const x = acc.find((item: ITask) => item.was === current.was);
  return !x ? acc.concat(current) : acc;
}, [] as ITask[] | []);

Unfortunately, I still received the following errors:

Property 'find' does not exist on type 'never'.
Property 'concat' does not exist on type 'never'.

Answer №1

Make sure to include more type indicators in your code snippet. For reference, check out this StackBlitz example.

const tasks: ITask[] = [
//    ^ correction: typo in the original question
   {id: "a", was: "Foo"},
   {id: "b", was: "Foo"},
   {id: "c", was: "Bad"},
]; 
const uniqueList: ITask[] = tasks.reduce<ITask[]>((acc: ITask[], current: ITask) => {
  const x = acc.find((item: ITask) => item.was === current.was);
  return !x ? acc.concat(current) : acc;
}, []);

Answer №2

For an illustration, here's a React component utilizing useState.

TS Playground

export interface ITask {
  id: string;
  was: string;
}

const tasks: ITask[] = [
  {id: "a", was: "Foo"}, 
  {id: "b", was: "Foo"}, 
  {id: "c", was: "Bad"}
]; 

// 'tasks' is typed by useState
//const [tasks, setTasks] = useState<ITask[]>([]);

const uniqueList = tasks.reduce<ITask[]>((acc, current) => {
  const x = acc.find((item: ITask) => item.was === current.was);
  return !x ? acc.concat(current) : acc;
}, []);

Explore the complete codesandbox.

import { useEffect, useState } from "react";

export interface ITask {
  id: string;
  was: string;
}

interface IProps {
  [tasks: string]: ITask[];
}

export default function App({ tasks: _tasks }: IProps) {
  const [tasks, setTasks] = useState<ITask[]>([]);

  useEffect(() => {
    setTasks(_tasks);
  }, [_tasks]);

  function uneek() {
    const uniqueList = tasks.reduce<ITask[]>((acc, current) => {
      const x = acc.find((item: ITask) => item.was === current.was);
      return !x ? acc.concat(current) : acc;
    }, []);
    setTasks(uniqueList);
  }

  return (
    <div className="App">
      <h1>Tasks</h1>
      {tasks.length
        ? tasks.map(({ id, was }) => (
            <div key={id}>
              <h4>{was}</h4>
            </div>
          ))
        : null}
      <button type="button" onClick={uneek}>
        uneek
      </button>
    </div>
  );
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Remove any repeated elements from the array and ensure that the element which occurs the most is placed at the beginning of the new array

Given an array "source" with values [2, 9, 9, 1, 6], we use the filter method to remove duplicate elements. The variable 'ans' stores the result. Now, how can we rearrange the elements in such a way that the highest repeated value (9) comes firs ...

Creating a Cascading State and City Dropdown Using Knockout JS and JSON Data

When the user selects a state from two fields, state and city, a call is sent to the server returning JSON data. This data needs to be used to update the city field in knockout, but there seems to be an issue with the syntax of getting the ajax data. Here ...

Effectively retrieving an observable value or transferring a reference

As a newcomer to Angular and Typescript, I am facing an issue with passing a reference into the subscribe function. In my code snippet below, I am attempting to assign the user value from the observable, but it seems like the function is not recognizing th ...

Flashing issues when utilizing the Jquery ui slider within an Angular 2 component

I recently incorporated a jquery-ui slider plugin into an angular 2 component and it's been working well overall, but I have encountered an annoying issue. Whenever the slider is used, there is a flickering effect on the screen. Interestingly, when I ...

Is there a way to place a button in the top-right corner next to my Bootstrap 5 card?

Can someone help me figure out how to position a button on the top right corner next to my bootstrap card? Here's the code I have so far: <div className="row p-5 m-2"> {savedEpisodes?.map((saved) => { return ( ...

Where to Locate a String Excluding <a> Tags?

I'm in the process of writing a JavaScript code that will scan an HTML document and identify all occurrences of a specific keyword that are NOT contained within a link, meaning not under an <a> tag. To illustrate this, let's examine the fol ...

Error in Vue.js and Socket.io - the server response cannot contain the wildcard '*' when the request has its credentials mode set to 'include'

I'm currently working on creating a chat app using Vue and Socket IO. Here's the error I'm encountering. This is my Node server code. And this is my Vue app code. My Node server and Vue app are separate entities. How can I resolve this i ...

Vitest surpasses Jest by providing explicit type declarations, ensuring no more "unknown type" errors

Transitioning from Jest to vitest has been a smooth process for me. I'm currently in the midst of converting the following code snippets: // Jest const myLib = jest.requireActual("mylib.js") to this: // Vitest const myLib = await vi.importA ...

Retrieving JSON data and transforming it into HTML

After reading several examples, I am still struggling with a particular issue. I am receiving a feed from an API that is structured like this: { total:123, id: "1234", results: [ { id: "1234", name: "bobs market", ...

Having difficulty incorporating TypeScript into Vue

A little while ago, I set up a vue project using vue init webpack . and everything was running smoothly. Recently, I decided to incorporate typescript and ts-loader. I created a file in the src directory with the following content: declare module '* ...

Arranging containers in a fixed position relative to their original placement

A unique challenge presents itself in the following code. I am attempting to keep panel-right in a fixed position similar to position: relative; however, changing from position: relative to position: fixed causes it to move to the right side while the left ...

How can you calculate the number of elements in a jQuery array and iterate through each of them?

After extracting a string from a mySQL query with PHP, my AJAX script comes into play. This string is then dissected and placed into a jQuery array. The results are displayed on the screen using .html() The length of this array can range from zero items t ...

Configuring the minimum and maximum time limits for the Materialize Time Picker

Currently, I am incorporating materializecss into my project and utilizing the Time Picker feature. My goal is to dynamically set the minimum and maximum time using JavaScript. For Datepicker $('.datepicker').pickadate({ selectMonths: true, ...

Tips for resolving package conflicts while integrating Wagmi View into a React/Typescript application

I am facing an issue while attempting to incorporate wagmi and viem packages into my project. Currently, my project utilizes the react-scripts package with the latest version being 5.0.1, and Typescript is operating on version 4.9.5. However, upon trying ...

Guide to deploying a Node.js application

After setting up npm locally and installing Bower, Grunt, Polymer, and Yeoman, I find myself a little confused about what Node.js actually is. In the past, I would set up an Apache server, install phpMyAdmin, and start working on my project using PHP. Howe ...

Unable to fetch information from the controllerAPI function within the tsx file due to a Module Parse error

I am currently working on fetching records from a database using ControllerApi and displaying them through React. The code snippet below is from a file with a *.tsx extension: import React, { useState } from 'react'; import ReactDOM from 'r ...

Get the file without specifying type in request - Angular

Is it possible to download a file solely through the response without specifying a responsetype in the header? I am looking for a way to download the file without including any additional parameters in the header. ...

Retrieving and showing information from a database (Using Javascript Ajax)

I'm in need of assistance with a project for my course and would appreciate any guidance or help that can be offered. My task involves creating a simple JavaScript XML Http Request to display basic information (specifically the country_name & country_ ...

React Native encountered an issue loading the configuration for your project

I'm having trouble creating a react native app. Every time I run the command "npx react-native init newProject", I encounter an error. Can someone assist me with creating a react native app and troubleshooting the recurring errors? strong texthttps:/ ...

Navigating Highcharts within jQuery

I am looking to integrate some new data into an existing Highchart on the page using the following code snippet: window['chart_' + skill_id].series[0].addPoint(data, true, false); This method works perfectly if I originally created the chart li ...