TypeScript联合类型reduce报错解决方案：探索类型检查的奇妙世界

2024-02-11 09:48:05

探索TypeScript联合类型的奥秘：一片广阔的类型天地

TypeScript联合类型允许您将多种类型组合成一个新的类型。这在处理不同类型的数据时非常有用，可以使代码更加灵活和简洁。联合类型使用竖线（|）来分隔不同的类型，例如：

type Pet = Dog | Cat | Fish;

这意味着Pet类型可以是Dog、Cat或Fish类型。这使得我们可以使用单个变量来存储不同类型的宠物。

邂逅reduce方法：数组处理的利器

reduce方法是数组的内置方法，用于对数组中的元素进行累积操作。reduce方法接受两个参数：一个回调函数和一个初始值。回调函数的作用是将数组中的每个元素与累积值结合起来，并返回一个新的值。初始值是累积操作的起始值。

例如，以下代码使用reduce方法计算数组中所有元素的和：

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出：15

当联合类型与reduce方法相遇：一场类型检查的较量

当我们使用联合类型和reduce方法时，可能会遇到“表达式有误”的错误。这是因为TypeScript的类型检查器无法确定reduce方法的回调函数的返回值类型。

例如，以下代码尝试使用reduce方法计算联合类型Pet中所有宠物的年龄：

type Pet = {
  name: string;
  age: number;
};

const pets = [
  { name: 'Fluffy', age: 3 },
  { name: 'Whiskers', age: 5 },
  { name: 'Goldie', age: 7 },
];

const totalAge = pets.reduce((accumulator, pet) => accumulator + pet.age, 0);
console.log(totalAge); // 错误：表达式有误

TypeScript的类型检查器无法确定reduce方法的回调函数的返回值类型，因为它不知道Pet类型可以是Dog、Cat或Fish类型。

拨开云雾见明月：揭示解决方案的真谛

为了解决此错误，我们需要告诉TypeScript联合类型Pet中所有类型都有age属性。一种方法是使用类型断言，另一种方法是使用类型守卫。

一、类型断言：强势指定类型，不容置疑

类型断言使用尖括号（<>）来指定变量的类型。在联合类型Pet中，我们可以使用类型断言来指定所有类型都有age属性：

const totalAge = pets.reduce((accumulator, pet) => accumulator + (pet as { age: number }).age, 0);
console.log(totalAge); // 输出：15

使用类型断言，我们明确告诉TypeScript联合类型Pet中所有类型都有age属性。这解决了“表达式有误”的错误。

二、类型守卫：条件判断，抽丝剥茧

类型守卫使用条件判断来检查变量的类型。在联合类型Pet中，我们可以使用类型守卫来检查每个宠物的类型，并根据类型来获取age属性：

const totalAge = pets.reduce((accumulator, pet) => {
  if ('age' in pet) {
    return accumulator + pet.age;
  } else {
    return accumulator;
  }
}, 0);
console.log(totalAge); // 输出：15