如何正確使用帶有Array.prototype.reduce的TypeScript？

我有以下reduce功能，無論我嘗試什么都不會消除錯誤：

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

這給了我：

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

對我來說，current值是 typeITask并且accumulatoris 是 type是絕對合乎邏輯的ITask[]|[]。因此，我試過：

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

這給出：

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

編輯：

從我嘗試的評論中：

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

這給了我：

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

uj5u.com熱心網友回復：

使用更多型別指示器。請參閱此stackblitz 代碼段。

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

uj5u.com熱心網友回復：

僅供參考，這里有一個在 React 組件中使用的示例，使用useState.

TS游樂場

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

查看完整的代碼和框。

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>
  );
}

標籤：javascript 打字稿 降低

上一篇：AngularNgxCharts圖表保持空白

下一篇：與Typescript介面和API呼叫反應