TypeScript 中如何处理数组中的 undefined 或 null

在 TypeScript 中，数组是一种非常常见的数据类型。然而，当数组中存在 undefined 或 null 时，可能会导致一些问题，例如类型错误或运行时错误。本文将介绍如何在 TypeScript 中处理数组中的 undefined 或 null，以及如何避免这些问题。

处理数组中的 undefined

使用类型断言

当数组元素可能为 undefined 时，最简单的方法是使用类型断言。例如：

const arr: (number | undefined)[] = [1, 2, undefined, 4];
const sum = arr.reduce((prev, curr) => prev + (curr ?? 0), 0);
console.log(sum); // 7

在这个例子中，我们使用了类型断言 (number | undefined)[] 来表示数组的类型。在 reduce 方法中，我们使用了空值合并运算符 ?? 来将 undefined 转换为 0，从而避免了类型错误。

使用过滤器

另一种处理数组中 undefined 的方法是使用过滤器。例如：

const arr: (number | undefined)[] = [1, 2, undefined, 4];
const filtered = arr.filter((item): item is number => item !== undefined);
const sum = filtered.reduce((prev, curr) => prev + curr, 0);
console.log(sum); // 7

在这个例子中，我们使用了一个过滤器函数，它的返回类型是 item is number，表示只有在 item 不为 undefined 时才返回 true。在 filter 方法中，我们使用了这个过滤器函数来过滤掉 undefined 元素，从而避免了类型错误。

处理数组中的 null

使用类型断言

当数组元素可能为 null 时，我们可以使用类似的方法来处理。例如：

const arr: (number | null)[] = [1, 2, null, 4];
const sum = arr.reduce((prev, curr) => prev + (curr ?? 0), 0);
console.log(sum); // 7

在这个例子中，我们使用了类似的类型断言 (number | null)[] 来表示数组的类型。在 reduce 方法中，我们使用了空值合并运算符 ?? 来将 null 转换为 0，从而避免了类型错误。

使用过滤器

另一种处理数组中 null 的方法是使用过滤器。例如：

const arr: (number | null)[] = [1, 2, null, 4];
const filtered = arr.filter((item): item is number => item !== null);
const sum = filtered.reduce((prev, curr) => prev + curr, 0);
console.log(sum); // 7

在这个例子中，我们使用了类似的过滤器函数，它的返回类型是 item is number，表示只有在 item 不为 null 时才返回 true。在 filter 方法中，我们使用了这个过滤器函数来过滤掉 null 元素，从而避免了类型错误。

总结

处理数组中的 undefined 或 null 是 TypeScript 开发中常见的问题。本文介绍了两种方法来处理这些问题：使用类型断言和使用过滤器。这些方法都可以帮助我们避免类型错误和运行时错误，提高代码的可靠性和可维护性。在实际开发中，我们应该根据具体情况选择合适的方法来处理数组中的 undefined 或 null。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660e227ed10417a222e9556b