TypeScript 中的类型断言和非空断言的使用方法

了解 null 和 undefined

在 TypeScript 和 JavaScript 中，null 和 undefined 都表示某个变量或属性的缺失或不存在。让我们先来看一下它们的定义：

• null：表示一个被赋值为空或不存在的对象引用。
• undefined：表示一个变量被声明但没有被赋值，或一个对象属性不存在。

简单来说，当我们想要表示一个值为空或不存在时，可以使用 null 或 undefined。

null 和 undefined 的区别

虽然 null 和 undefined 都用于表示缺失或不存在的值，但它们之间还是有一些细微的区别。让我们详细了解一下：

null

null 是一个 JavaScript 原始值，表示一个被赋值为空或不存在的对象引用。它是一个空对象指针，用于显式地表示变量或属性的值为空。

例如，我们有一个变量 name，我们可以将其赋值为 null 来表示这个变量的值为空：

let name: string | null = null;

在这个例子中，我们明确地告诉编译器，name 的值是空的，它不指向任何有效的对象。

undefined

undefined 同样也是一个 JavaScript 原始值，表示一个变量被声明但没有被赋值，或一个对象属性不存在。当你访问一个未赋值的变量或不存在的对象属性时，该值就会被返回。

例如，我们声明一个变量 age，但没有为其赋值：

let age: number | undefined;
console.log(age); // 输出 undefined

在这个例子中，age 被声明了但没有赋值，因此它的值是 undefined。

区别总结

可以简单总结一下 null 和 undefined 的区别：

• null 是一个被赋值为空的对象引用，表示空或不存在的值。
• undefined 表示一个变量被声明但没有被赋值，或一个对象属性不存在。

如何处理

null 和 undefined

在编写代码时，我们经常会遇到处理 null 和 undefined 的情况。为了避免出现意外的错误或异常，我们应该注意如何正确地处理这两个值。

避免隐式转换

在 JavaScript 中，null 和 undefined 可以进行隐式转换，这会导致一些不可预料的结果。为了避免这种情况，我们可以使用严格相等运算符（===）进行比较，同时要注意变量的类型。

let name: string | null = null;

if (name === null) {
  // 处理变量值为 null 的情况
}

使用条件语句

当我们需要处理可能为 null 或 undefined 的值时，可以使用条件语句来进行判断和处理。

function printMessage(message?: string) {
  if (message) {
    console.log(message);
  } else {
    console.log("消息为空或不存在");
  }
}

printMessage("Hello, TypeScript!"); // 输出：Hello, TypeScript!
printMessage(); // 输出：消息为空或不存在

在这个例子中，我们定义了一个函数 printMessage，它接受一个可选的字符串参数 message。如果 message 有值，则打印该消息，否则打印一条默认消息。

使用默认值

为了确保变量不为 null 或 undefined，我们可以使用默认值来处理这种情况。

let name: string | null = null;

let displayName = name || "Unknown";
console.log(displayName); // 输出：Unknown

在这个例子中，如果 name 为 null 或 undefined，则使用默认值 "Unknown"。

TypeScript 中的类型断言和非空断言

在 TypeScript 中，我们可以使用类型断言和非空断言来告诉编译器我们对变量的类型或值的确定性。

类型断言

类型断言是一种方式，可以手动指定变量的类型。我们可以使用类型断言来告诉编译器，我们确定一个变量不会为 null 或 undefined。

let name: string | null = getName();
let message = "Hello, " + name!; // 使用非空断言告诉编译器 name 不为空

function getName(): string | null {
  // 返回一个字符串或 null
}

在这个例子中，我们使用了非空断言 ! 来告诉编译器 name 不会为 null 或 undefined。这样我们就可以安全地使用 name 变量，而无需进行额外的判断。

非空断言

非空断言是一种类型断言的特殊形式，用于告诉编译器一个变量不为 null 或 undefined。非空断言的语法是在变量名后面添加一个感叹号 !。

let name: string | null = getName();
let message = "Hello, " + name!; // 使用非空断言告诉编译器 name 不为空

function getName(): string | null {
  // 返回一个字符串或 null
}

在这个例子中，我们使用了非空断言 ! 来告诉编译器 name 不会为 null 或 undefined。这样我们就可以安全地使用 name 变量，而无需进行额外的判断。

实际应用案例

让我们看几个实际的应用案例，来更好地理解在 TypeScript 中如何处理 null 和 undefined。

例子一：安全访问对象属性

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

function printPersonName(person: Person) {
  const name = person.name || "Unknown";
  console.log(name);
}

const person1: Person = {
  name: "Alice",
};

const person2: Person = {};

printPersonName(person1); // 输出：Alice
printPersonName(person2); // 输出：Unknown

在这个例子中，我们定义了一个 Person 接口，它有两个可选的属性 name 和 age。在 printPersonName 函数中，我们安全地访问了 person 对象的 name 属性，并使用默认值 "Unknown" 处理了属性不存在的情况。

例子二：处理函数返回值为 null 或 undefined

function divide(a: number, b: number): number | null {
  if (b === 0) {
    return null;
  }

  return a / b;
}

const result1 = divide(10, 2);
const result2 = divide(10, 0);

if (result1 !== null) {
  console.log("Result:", result1);
} else {
  console.log("Cannot divide by zero!");
}

if (result2 !== null) {
  console.log("Result:", result2);
} else {
  console.log("Cannot divide by zero!");
}

在这个例子中，我们定义了一个 divide 函数，用于计算两个数的商。如果除数为 0，函数会返回 null，否则返回计算结果。在使用函数返回值之前，我们使用条件语句进行了判断，并处理了返回值为 null 的情况。

总结

在 TypeScript 中，null 和 undefined 都表示某个变量或属性的缺失或不存在。它们虽然有些相似，但在细节上还是有一些区别。

• null 表示一个被赋值为空的对象引用，用于显式地表示变量或属性的值为空。
• undefined 表示一个变量被声明但没有被赋值，或一个对象属性不存在。

为了正确地处理 null 和 undefined，我们可以避免隐式转换、使用条件语句、使用默认值、使用类型断言和非空断言等方法。在实际的开发中，根据具体的场景和需求，选择合适的方式来处理这两个值。

示例代码仅用于说明概念，可能不符合最佳实践。在实际开发中，请根据具体情况进行调整。