TypeScript 中如何处理 undefined 和 null-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，undefined 和 null 是非常常见的值类型。它们表示一个变量不存在或者没有值。在 JavaScript 中，这两种类型的值可以被随意使用，但是在 TypeScript 中，由于需要严格的类型检查，我们需要确保在代码中处理这些值类型。本文将介绍 TypeScript 中如何处理 undefined 和 null，并提供一些示例代码以帮助您更好地理解。

什么是 undefined 和 null？

在 JavaScript 中，undefined 和 null 是两种特殊的值类型。它们都表示变量没有值，但它们之间有一些微小的区别。

undefined 表示一个变量已经声明，但是没有被赋值；null 表示一个变量被赋予了一个空的值。

在 TypeScript 中，undefined 和 null 也是独立的类型。这意味着在声明一个变量时，您可以选择将其类型设置为 undefined 或 null。

TypeScript 中如何处理 undefined 和 null？

在 TypeScript 中，您可以使用可选类型和联合类型来处理 undefined 和 null。下面是一些常见的用例和示例代码：

1. 可选类型

使用可选类型可以表示一个变量或属性可能存在或不存在。在 TypeScript 中，将一个变量或属性的类型设置为 undefined | <type> 表示它可以是指定类型或 undefined。这种类型称为“联合类型”。

let myVar: string | undefined = "Hello, world!";
myVar = undefined;  // OK
myVar = null;       // Error: 'null' is not assignable to type 'string | undefined'

在上面的示例中，我们将 myVar 的类型设置为 string | undefined，表示它可以是一个字符串或者 undefined。我们可以将其赋值为一个字符串或者 undefined，但不能将其赋值为 null。

2. 断言类型

使用断言类型可以将一个可能是 undefined 或 null 的变量或属性强制转换为非空类型。

let myVar: string | undefined = "Hello, world!";
const myVarLength = myVar!.length;  // OK

在上面的示例中，我们使用了断言类型 ! 来将 myVar 转换为非空类型。这个操作告诉 TypeScript，我们已经确保 myVar 一定是一个字符串类型，并安全地访问了其长度属性。

需要注意的是，如果 myVar 的值为 undefined 或 null，这个操作会抛出一个运行时错误。

3. 默认值

在某些情况下，我们希望将一个可能是 undefined 或 null 的变量或属性设置为一个默认值。可以使用逻辑或运算符 || 来实现这一点。

let myVar: string | undefined = undefined;
myVar = myVar || "Hello, world!";
console.log(myVar);  // 输出 "Hello, world!"

在上面的示例中，我们将 myVar 的值设置为 undefined，然后使用 myVar || "Hello, world!" 来将其设置为 "Hello, world!"。这里的逻辑是，如果 myVar 为真值（不为 undefined 或 null），则返回 myVar；否则返回默认值 "Hello, world!"。这个操作将 myVar 的值设置为默认值。

总结

在 TypeScript 中，处理 undefined 和 null 非常重要。要确保在声明变量或属性时，将其类型设置为可选类型或联合类型。可以使用断言类型或逻辑或运算符来处理这些值类型，并确保程序运行时不会抛出错误。

希望这篇文章对您有帮助！

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