跳到主要内容

TypeScript 可空类型

在 TypeScript 中，可空类型是指一个变量或属性可能为 null 或 undefined 的情况。理解可空类型对于编写健壮的 TypeScript 代码至关重要，因为它可以帮助我们避免运行时错误，尤其是在处理不确定的数据时。

什么是可空类型？​

在 JavaScript 中，变量可以随时被赋值为 null 或 undefined。TypeScript 通过类型系统提供了对这些情况的明确支持。可空类型允许我们声明一个变量可能包含 null 或 undefined，从而在编译时捕获潜在的错误。

基本语法​

在 TypeScript 中，可以通过联合类型（Union Types）来表示可空类型。例如：

typescript
let name: string | null = null;
name = "Alice"; // 合法
name = null;    // 合法

在上面的例子中，name 可以是 string 类型，也可以是 null 类型。

备注

undefined 也可以作为可空类型的一部分。例如：

typescript
let age: number | undefined;
age = 25;      // 合法
age = undefined; // 合法

处理可空类型​

当变量可能为 null 或 undefined 时，我们需要小心处理，以避免运行时错误。以下是几种常见的处理方式：

1. 类型守卫（Type Guards）​

通过类型守卫，我们可以在代码中明确检查变量是否为 null 或 undefined：

typescript
function greet(name: string | null) {
    if (name === null) {
        console.log("Hello, Guest!");
    } else {
        console.log(`Hello, ${name}!`);
    }
}

2. 可选链操作符（Optional Chaining）​

可选链操作符 ?. 允许我们在访问可能为 null 或 undefined 的属性时避免抛出错误：

typescript
let user = {
    profile: {
        name: "Alice"
    }
};

console.log(user.profile?.name); // 输出: Alice
console.log(user.address?.city); // 输出: undefined

3. 空值合并操作符（Nullish Coalescing）​

空值合并操作符 ?? 用于在变量为 null 或 undefined 时提供一个默认值：

typescript
let input: string | null = null;
let value = input ?? "default";
console.log(value); // 输出: default

实际案例​

假设我们正在开发一个用户管理系统，用户信息可能不完整。我们可以使用可空类型来处理这种情况：

typescript
interface User {
    name: string;
    age?: number; // 可选属性
}

function displayUser(user: User) {
    console.log(`Name: ${user.name}`);
    console.log(`Age: ${user.age ?? "Unknown"}`);
}

let user1: User = { name: "Alice" };
let user2: User = { name: "Bob", age: 25 };

displayUser(user1); // 输出: Name: Alice, Age: Unknown
displayUser(user2); // 输出: Name: Bob, Age: 25

在这个例子中，age 是一个可选属性，可能为 undefined。我们使用空值合并操作符 ?? 来提供一个默认值。

总结​

TypeScript 的可空类型为我们提供了一种安全的方式来处理可能为 null 或 undefined 的值。通过联合类型、类型守卫、可选链操作符和空值合并操作符，我们可以编写更加健壮和可维护的代码。

提示

在实际开发中，尽量明确变量的类型，避免滥用 null 和 undefined。使用可空类型时，确保在代码中进行适当的检查和处理。

附加资源​

练习​

  1. 编写一个函数 getLength，接受一个可能为 null 或 undefined 的字符串，并返回其长度。如果字符串为 null 或 undefined，返回 0。

  2. 修改以下代码，使其在 user.address 为 null 或 undefined 时不抛出错误：

    typescript
    let user = {
        address: {
            city: "New York"
        }
    };
    console.log(user.address.city);

通过练习，你将更好地掌握 TypeScript 可空类型的使用。