在前端开发中，数据的处理十分重要。而在 TypeScript 中，即使开发者已经避免了隐式的类型转换和其他可能引起类型错误的操作，他们还需要考虑处理 null 和 undefined 的情况。这是因为随着应用程序规模的增长，空值和 undefined 的出现几乎是不可避免的。在这篇文章中，我们将深入探讨如何正确处理 TypeScript 中的空值和 undefined。
空值和 undefined 的区别
在 JavaScript 中，null 和 undefined 有一个共同的特性，即它们都是 falsy 值。然而，它们在语义上有所区别，因为它们的定义不同。
- null 表示一个对象被定义但是值为空；
- undefined 表示一个对象未定义，即该对象不存在。
在 TypeScript 中，任何类型都可以分配 null 或 undefined。这也就是为什么 TypeScript 中的类型系统和 JavaScript 中的类型系统是一样的。然而，当编写代码时，必须小心处理这两种值。
如何处理空值和 undefined
TypeScript 提供了几种不同的处理空值和 undefined 的方法，包括：
使用类型注释
在 TypeScript 中，可以通过类型注释来指定变量、参数或返回值不应为 null 或 undefined。例如，以下代码声明了一个 string 类型的变量，ms，该变量不应为 null 或 undefined：
let ms: string;
它会在编译时报错，如果在后面没有给 ms 赋值的话。
使用可选属性
当我们声明一个对象时，我们可以加一个 ? 在属性或方法名的后面，表示这个属性或方法是可选的。比如：
interface UserInfo {
name: string;
age?: number;
}
const user1: UserInfo = {name: '小明'}使用非空断言操作符
在 TypeScript 2.0 中，引入了一个非空断言操作符 !，可以用于声明一个值不会为空和 undefined。例如：
let ms!: string;
但是，这种方法并不建议使用，因为它可能会掩盖潜在的编程错误。
使用类型推导
当使用类型推导时，TypeScript 会有一些默认的行为来处理空值和 undefined。例如：
let a = 'hello'; let b = a || 0;
上面的代码中，变量 b 会被分配一个值 hello，而不是 0。因为 a 是一个 string 类型而不是 null 或 undefined，TypeScript 会选择将 a 赋给 b，而不是 0。
使用函数参数默认值
在函数的参数列表中，我们可以使用默认值语法来处理不允许为空的值。例如：
function sayHello(name: string = 'World') {
console.log(`Hello, ${name}!`);
}如果没有提供参数，则函数将使用默认值 World。
使用返回类型或 void 函数
在 TypeScript 中，可以使用返回类型或 void 函数来处理空值和 undefined。例如：
function getString(): string {
return 'Hello';
}
function doSomething(): void {
console.log('Do something');
}使用可选链运算符
TypeScript 3.7 引入了可选链运算符 ?.，允许我们安全地调用来自可能为空或未定义源的属性和方法。例如：
-- -------------------- ---- ------- --------- ------ - ------ ------- - ----- -------- ------ - --------- - - ----- ---- - --------------------------- -- ----- ----- -------- ------ - --------- - -- --------------------------- -- ------------
总结
在 TypeScript 中，处理空值和 undefined 是开发人员必须考虑的重要问题。本文介绍了一些处理空值和 undefined 的最佳实践，但我们需要根据具体情况采取不同的方法来避免潜在的编程错误。希望本文能为您在实践中处理空值和 undefined 提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f98348f6b2d6eab3101171