在 TypeScript 中，可选属性（Optionals）是一个非常重要的特性。它允许我们在定义对象的属性时，将某些属性标记为可选的，从而允许这些属性的值为 undefined 或 null。这在开发过程中是非常有用的，因为我们无法保证对象的每个属性都有值。
在本文中，我们将深入探讨 TypeScript 中可选属性的使用，包括如何定义可选属性、如何使用它们以及如何避免常见的错误。
定义可选属性
在 TypeScript 中，我们可以使用问号（?）来定义可选属性。例如，假设我们有一个用户对象，其中包含可选的地址属性：
interface User {
name: string;
email: string;
address?: string;
}在上面的示例中，我们使用了问号（?）来定义了 address 属性为可选属性。这意味着我们可以创建一个用户对象，其中没有 address 属性：
const user: User = {
name: 'John Doe',
email: 'john.doe@example.com'
};我们也可以创建一个具有 address 属性的用户对象：
const userWithAddress: User = {
name: 'John Doe',
email: 'john.doe@example.com',
address: '123 Main St.'
};使用可选属性
在使用可选属性时，我们需要小心处理 undefined 和 null 值。如果我们试图访问一个可选属性的值，而该属性的值为 undefined 或 null，那么 TypeScript 将会抛出一个错误。
例如，假设我们想要打印出用户的地址，但是用户可能没有地址。我们可以使用如下的代码：
const userAddress = user.address; console.log(userAddress);
但是，如果用户没有地址，那么 userAddress 的值将为 undefined。如果我们尝试使用如下代码打印 userAddress 的值：
console.log(userAddress.length);
TypeScript 将会抛出一个错误，因为我们无法对 undefined 进行属性访问。为了避免这种错误，我们需要使用如下的代码来检查 userAddress 的值是否为 undefined：
if (userAddress) {
console.log(userAddress.length);
}在这个示例中，我们使用了 if 语句来检查 userAddress 的值是否为 undefined。如果 userAddress 不是 undefined，那么我们可以安全地访问它的 length 属性。
避免常见的错误
在使用可选属性时，有一些常见的错误需要避免。下面是一些常见的错误和如何避免它们的方法：
1. 忘记定义可选属性
如果我们忘记将属性标记为可选属性，那么 TypeScript 将会强制要求我们在创建对象时为该属性赋值。例如，假设我们有以下的代码：
-- -------------------- ---- ------- --------- ---- - ----- ------- ------ ------- -------- ------- - ----- ----- ---- - - ----- ----- ----- ------ ---------------------- --
在这个示例中，我们忘记将 address 属性标记为可选属性。因此，当我们试图创建一个用户对象时，TypeScript 将会抛出一个错误，要求我们为 address 属性赋值。
为了避免这种错误，我们需要确保每个可选属性都使用问号（?）进行标记。
2. 访问不存在的可选属性
如果我们试图访问一个对象的不存在的可选属性，那么 TypeScript 将会抛出一个错误。例如，假设我们有以下的代码：
-- -------------------- ---- ------- --------- ---- - ----- ------- ------ ------- --------- ------- - ----- ----- ---- - - ----- ----- ----- ------ ---------------------- -- ------------------------
在这个示例中，我们试图访问 user 对象的 phone 属性，但是该属性并不存在。因此，TypeScript 将会抛出一个错误。
为了避免这种错误，我们需要确保我们只访问已经定义的属性。
示例代码
下面是一个完整的示例代码，演示了如何定义和使用可选属性：
-- -------------------- ---- ------- --------- ---- - ----- ------- ------ ------- --------- ------- - ----- ----- ---- - - ----- ----- ----- ------ ---------------------- -- ----- ---------------- ---- - - ----- ----- ----- ------ ----------------------- -------- ---- ---- ---- -- ----- ----------- - ------------- -- ------------- - -------------------------------- -
结论
在 TypeScript 中，可选属性是一个非常有用的特性，允许我们定义对象的属性为可选属性。在使用可选属性时，我们需要小心处理 undefined 和 null 值，并避免常见的错误。通过正确使用可选属性，我们可以编写出更加健壮和可靠的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6760f1f003c3aa6a56075096