迹忆客 专注技术分享

使用泛型在 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。

我们在 ReduceReturnType 中将属性标记为可选以满足编译器的要求，因为我们传递给 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'}

我们使用 Record<string, string> 作为累加器的类型、reduce() 方法的初始值和返回值。

Record<Keys, Type> 类型是一种实用类型，用于构造其键和值具有特定类型的对象。

示例中的类型表示当对象以字符串键索引时，它返回一个字符串类型的值。

换句话说，示例中的累加器变量是一个包含字符串键和值的对象。

当前变量存储当前迭代的数组元素。