跳到主要内容

TypeScript 可空类型

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

什么是可空类型?

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

基本语法

在 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; // 合法

处理可空类型

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

1. 类型守卫(Type Guards)

通过类型守卫,我们可以在代码中明确检查变量是否为 nullundefined

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

2. 可选链操作符(Optional Chaining)

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

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

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

3. 空值合并操作符(Nullish Coalescing)

空值合并操作符 ?? 用于在变量为 nullundefined 时提供一个默认值:

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 的可空类型为我们提供了一种安全的方式来处理可能为 nullundefined 的值。通过联合类型、类型守卫、可选链操作符和空值合并操作符,我们可以编写更加健壮和可维护的代码。

提示

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

附加资源

练习

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

  2. 修改以下代码,使其在 user.addressnullundefined 时不抛出错误:

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

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