可选链接 - TypeScript

在 TypeScript 中，我们可以使用可选链接运算符（?）来处理可能为空的属性。

什么是可选链接？

可选链接运算符是一种安全的方式来处理可能为空的属性。

它允许我们访问嵌套对象的属性，如果任何级别的属性为空（即 null 或 undefined），则不会引发错误。相反，返回值将是 undefined。

以下是使用可选链接运算符的示例：

let user = { 
  id: 123, 
  name: 'John', 
  address: { 
    city: 'London' 
  } 
};

console.log(user?.address?.city); // 输出 'London'
console.log(user?.address?.street); // 输出 undefined

在这个例子中，我们尝试访问 user.address.city 和 user.address.street。由于 user.address.street 没有定义，所以返回值是 undefined。

对于可能不存在的属性，我们可以使用 & 运算符来定义类型。

以下是一个使用可选链接和 & 运算符的示例：

interface User { 
  id: number; 
  name: string; 
  address?: { 
    city: string; 
    street: string; 
  }; 
}

function getAddress(user: User) { 
  return user?.address?.city && user?.address.street ? `${user.address.city}, ${user.address.street}` : 'Unknown'; 
}

let user1: User = { 
  id: 123, 
  name: 'John', 
  address: { 
    city: 'London', 
    street: 'High Street' 
  } 
};

let user2: User = { 
  id: 123, 
  name: 'John' 
};

console.log(getAddress(user1)); // 输出 'London, High Street'
console.log(getAddress(user2)); // 输出 'Unknown'

在这个例子中，我们定义了 User 接口来表示用户对象。User 接口有一个可选的 address 属性，这使我们可以在 getAddress 函数中使用可选链接运算符来检查用户对象是否具有 address 属性。

如果 user.address.city 和 user.address.street 存在，则返回拼接的地址字符串。否则，返回 'Unknown'。

总结

可选链接运算符是一种安全的方式来处理可能为空的属性。在 TypeScript 中使用可选链接运算符可以避免多余的错误和运行时异常。