如何正确使用 TypeScript 和 Array.prototype.reduce？

Question

I have the following reduce function and whatever I try is not removing the errors:

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;
}, []);

that gives me:

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

It is absolutely logical for me, that the current value is of type ITask and the accumulator is of type ITask[]|[] . Thus, I tried:

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

This gives:

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

Edit:

---

From 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[] | []);

This gives me:

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

Answer 1

Use a few more type indicators. See this stackblitz snippet .

const tasks: ITask[] = [
//    ^ note: typo in 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

Just for reference here is an example of use within a React component using 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;
}, []);

See the full 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>
  );
}