TypeScript 中可选链是如何工作的？

在本文中，您将了解 TypeScript 中可选链是如何工作的。可选链运算符 (?.) 用于访问对象的属性。如果对象的属性为 null 或未定义，则返回 'undefined'。让我们首先了解一下 TypeScript 是什么。

TypeScript 是一种强类型编程语言，它基于 JavaScript，在任何规模下都能为您提供更好的工具。用 TypeScript 编写的代码可以转换为在任何兼容 JavaScript 的环境中执行。TypeScript 理解 JavaScript，并使用类型推断来提供出色的工具，而无需额外的代码。

示例 1

在这个例子中，我们使用了可选链运算符并调用了两次函数。第一次调用返回对象的属性，第二次调用返回 'undefined' -

let displayMessage = (firstWord , lastWord) => {
   return "Message : " + firstWord + " " + lastWord;
}
console.log("The first input words are Good and Evening")
console.log("The Display message is: ")
console.log(displayMessage("Good", "Evening"));

console.log("
The first input words are Good")
console.log("The Display message is: ")
console.log(displayMessage("Good"));

输出

The first input words are Good and Evening
The Display message is: 
Message : Good Evening
The first input words are Good and Morning
The Display message is: 
Message : Good undefined

解释

  • 步骤 1 - 定义一个名为 'displayMessage' 的函数，该函数接收两个字符串并将其打印在一起。

  • 步骤 2 - 使用两个字符串调用该函数并打印结果。

  • 步骤 3 - 只用一个字符串调用该函数并显示结果。

示例 2

type User = {
   id: number;
   name?: {
      firstWord: string;
      lastWord?: string;
   }
};
const users: User[] = [{
   id: 1,
   name: {
      firstWord: "Welcome"
   }
},
{
   id: 2,
   name: {
      firstWord: "Good",
      lastWord: "Evening"
   }
},
{
   id: 3
},
];
console.log("The first input word is Welcome")
console.log("The second input words are Good and Evening")

console.log("After calling the values, the result is")
users.map(element => console.log(element.name?.lastWord));
users.map(element => console.log(element.name?.lastWord));

输出

The first input word is Welcome
The second input words are Good and Evening

After calling the values, the result is

undefined 
"Evening" 
undefined

解释

  • 步骤 1 - 定义多个变量，这些变量接收不同的值（例如字符串或数字）作为参数，并且数量也不同。

  • 步骤 2 - 调用这些变量。如果参数类型和值匹配，则显示这些变量。如果参数不匹配，则返回 'undefined'。

更新于: 2023年2月16日

317 次浏览

启动你的 职业生涯

通过完成课程获得认证

开始学习
广告