TypeScript 中如何限定 reduce() 方法

TypeScript 3月前 41

使用泛型在 TypeScript 中限定 reduce() 方法，例如 const result = arr.reduce<Record<string, string>>(myFunction, {})。泛型用于指定 reduce() 方法的返回值和初始值的类型。

const arr = [{ id: 1 }, { name: 'Alice' }, { salary: 100 }];

type ReduceReturnType = {
  id?: number;
  name?: string;
  salary?: number;
};

const result = arr.reduce<ReduceReturnType>(
  (accumulator, current) => {
    return { ...accumulator, ...current };
  },
  {}, // ?️ initial value
);

// const result: ReduceReturnType
console.log(result); // ?️ {id: 1, name: 'Alice', salary: 100}

console.log(result.id); // ?️ 1
console.log(result.name); // ?️ "Alice"
console.log(result.salary); // ?️ 100

我们使用泛型来指定 reduce() 方法的初始值和返回值的类型。

结果变量的类型在示例中为 ReduceReturnType。

我们还可以使用类型断言，尤其是在返回值的类型与初始值的类型不同的情况下。

const arr = [{ id: 1 }, { name: 'Alice' }, { salary: 100 }];

type ReduceReturnType = {
  id: number; // ?️ ?️ ?️ no longer optional
  name: string;
  salary: number;
};

const result = arr.reduce<ReduceReturnType>(
  (accumulator, current) => {
    return { ...accumulator, ...current };
  },
  {} as ReduceReturnType, // ?️ ?️ ?️ Now using Type Assertion
);

// const result: ReduceReturnType
console.log(result); // ?️ {id: 1, name: 'Alice', salary: 100}

console.log(result.id); // ?️ 1
console.log(result.name); // ?️ "Alice"
console.log(result.salary); // ?️ 100

我们传递给 reduce() 方法的函数会为数组中的每个元素调用。 reduce() 方法返回累加的结果。

在下一次迭代中，累加器变量包含我们从回调函数返回的任何内容。

让我们看另一个输入 reduce() 方法的例子。

const arr = ['a', 'b', 'c'];

type ReduceReturnType = Record<string, string>;

const result = arr.reduce<ReduceReturnType>(
  (accumulator, current) => {
    return { ...accumulator, [current]: current };
  },
  {}, // ?️ initial value
);

// const result: ReduceReturnType
console.log(result); // ?️ {a: 'a', b: 'b', c: 'c'}