TypeScript 可选链是如何工作的

在这篇文章中，你将了解TypeScript中的可选链式是如何工作的。可选的链式运算符(?.)可以访问一个对象的属性。如果对象的属性为空或未定义，它将返回 “未定义”。让我们先了解一下TypeScript是什么。

强类型编程语言TypeScript是基于JavaScript的，它在任何规模上都能给你提供更好的工具。用TypeScript编写的代码可以转换为在任何兼容JavaScript的环境中执行。JavaScript被TypeScript理解，类型推理被用来提供优秀的工具，而不需要额外的代码。

例子1

在这个例子中，我们使用了可选的链式运算符，并调用了两次函数。第一次调用返回对象属性，第二次调用返回 “未定义” —

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步 -调用 这些变量。如果参数类型和数值匹配，则显示这些变量。如果参数不匹配，将返回 “未定义”。