TypeScript 中如何优雅的处理 null 和 undefined

在 TypeScript 中，我们经常需要处理 null 和 undefined 这两个特殊的值。如果不恰当地处理它们，可能会导致代码出现运行时错误。本文将介绍 TypeScript 中如何优雅地处理 null 和 undefined，以及一些最佳实践。

什么是 null 和 undefined

在 TypeScript 和 JavaScript 中，null 和 undefined 是两个特殊的值，表示一个变量没有值。

• null 表示一个变量被明确地赋值为 null 值，即空值。
• undefined 表示一个变量没有被赋值，或者被赋值为 undefined 值。

如何处理 null 和 undefined

使用非空断言操作符

在 TypeScript 中，可以使用非空断言操作符 ! 来告诉编译器，一个变量不会为 null 或 undefined。

let foo: string | null = null;
let bar: string = foo!; // 非空断言操作符

上面的代码中，我们使用 ! 告诉编译器，foo 不会为 null 或 undefined。这样就可以安全地将 foo 赋值给 bar。

使用可选链操作符

可选链操作符 ?. 是 TypeScript 3.7 中引入的新特性，可以方便地处理 null 和 undefined。

interface Person {
  name: string;
  age?: number;
}

const person: Person = { name: 'Alice' };

const age = person.age?.toString();

上面的代码中，我们使用可选链操作符 ?. 来访问 person 对象的 age 属性。如果 person.age 为 undefined 或 null，age 变量将为 undefined。

使用默认值操作符

在 TypeScript 中，可以使用默认值操作符 ?? 来为变量设置默认值。

let foo: string | null = null;
let bar: string = foo ?? 'default'; // 默认值操作符

console.log(bar); // 'default'

上面的代码中，我们使用默认值操作符 ?? 来设置 bar 变量的默认值为 'default'。如果 foo 为 null 或 undefined，bar 将被赋值为 'default'。

使用类型保护

在 TypeScript 中，可以使用类型保护来判断一个变量是否为 null 或 undefined。

function printLength(str: string | null): void {
  if (str !== null) {
    console.log(str.length);
  }
}

printLength(null); // 不会输出
printLength('hello'); // 输出 5

上面的代码中，我们使用 if 语句和类型保护来判断 str 是否为 null。如果不为 null，我们就可以安全地访问 str.length。

最佳实践

在 TypeScript 中，处理 null 和 undefined 的最佳实践如下：

• 尽可能使用非空断言操作符 !、可选链操作符 ?. 和默认值操作符 ?? 来处理 null 和 undefined。
• 在函数中，应该使用类型保护来判断参数是否为 null 或 undefined。
• 避免直接使用 null 和 undefined，而是应该使用 TypeScript 中的类型来表示可选值。
• 在代码中保持一致性，使用相同的方式处理 null 和 undefined。

结论

在 TypeScript 中，处理 null 和 undefined 是非常重要的。如果不恰当地处理它们，可能会导致代码出现运行时错误。本文介绍了 TypeScript 中如何优雅地处理 null 和 undefined，以及一些最佳实践。希望能帮助大家写出更加健壮的 TypeScript 代码。

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