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

在本文中，我们将尝试了解如何执行并分析 TypeScript 中可选链的工作原理。

TypeScript 可选链：

• TypeScript 可选链是搜索和调用可能不存在的变量、方法、参数的过程。
• 此特定功能允许开发人员停止遇到通常在未定义事物时出现的错误，并且他们可以使用此特定功能轻松处理未定义事物。

可选链如何工作？

• 可选链接实际上以一种有点棘手的方式工作，其中它首先检查特定变量或函数的可用性。
• 如果该变量或函数在文件中可用，则继续检查进一步提到的变量或函数。
• 如果该变量不可用，它会立即停止进一步检查并返回“未定义”，用户可以使用某些逻辑轻松处理。

让我们首先分析如何将参数（当我们在函数中工作时）或变量作为 TypeScript 中的可选变量。

声明可选参数的语法：按照语法，我们可以使用以使变量在 TypeScript 中成为可选（“ ？ ”此运算符用于使任何变量在 TypeScript 中成为可选）-

parameter_name? : return_type

示例 1：在此示例中，我们将通过示例实现上述语法。

Javascript

let displayName = (firstName: string , lastName? : string) => {
    return "Name : " + firstName + " " + lastName;
}
  
console.log(displayName("Hello", "World"));
console.log(displayName("GeeksforGeeks"));

输出：上图所示的代码将为两者生成输出，但在这样传递的单个参数的情况下，它会产生错误，它只会显示“未定义”。

Name : Hello World
Name : GeeksforGeeks undefined

现在我们已经了解了如何在 TypeScript 中声明可选参数。现在让我们看看如何使用以下示例在 TypeScript 中执行可选链接 -

示例 2：在此示例中，我们将在显示结果或输出时实现可选链接。

Javascript

type User = {
    id: number;
    name?: {
        firstName: string;
        lastName?: string;
    }
};
  
const users: User[] = [{
    id: 1,
    name: {
        firstName: "GeeksforGeeks"
    }
},
{
    id: 2,
    name: {
        firstName: "Hello",
        lastName: "World"
    }
},
{
    id: 3
},
];
  
users.map(element => console.log(element.name?.lastName));

输出：

undefined
World
undefined

示例 3：在此示例中，我们将展示不同样式或技术的可选链。

Javascript

type personDetails = {
  name : string,
  details? : {
    age?: number,
    location?: string,
  }
}
  
let person_one: personDetails = {
  name: "GeeksforGeeks",
  details : {
    age: 20,
    location: "Noida"
  }
}
  
let person_two: personDetails = {
  name: "GeeksforGeeks",
  details : {
    location: "Noida"
  }
}
  
let person_three: personDetails = {
  name: "GeeksforGeeks",
  details : {
    age: 20,
  }
}
  
let data_1 = person_one.name + " " 
    + person_one.details?.age + " " 
    + person_one.details?.location;
console.log(data_1);
  
let data_2 = person_two.name + " " 
    + person_two.details?.age + " " 
    + person_two.details?.location;
console.log(data_2);
  
let data_3 = person_three.name + " " 
    + person_three.details?.age + " " 
    + person_three.details?.location;
console.log(data_3);

输出：

GeeksforGeeks 20 Noida
GeeksforGeeks undefined Noida
GeeksforGeeks 20 undefined