Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How optional chaining works in TypeScript?
In this article, you will understand how optional chaining works in TypeScript. Optional chaining operator (?.) accesses an object’s property. If the objects property is null or not defined, it returns ‘undefined’. Let us first understand what TypeScript is.
Strongly typed programming language TypeScript, which is based on JavaScript, gives you better tools at any scale. Code written in TypeScript can be converted to execute in any JavaScript-compatible environment. JavaScript is understood by TypeScript, and type inference is used to provide excellent tooling without the need for additional code.
Example 1
In this example, we use the optional chaining operator and call the function twice. The first call returns the objects property and the second call returns ‘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"));
Output
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
Explanation
Step 1 −Define a function ‘displayMessage’ that takes in two strings and prints them together.
Step 2 −Call the function with two strings and print the result.
Step 3 −Call the function with just one string and display the result.
Example 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));
Output
The first input word is Welcome The second input words are Good and Evening After calling the values, the result is undefined "Evening" undefined
Explanation
Step 1 −Define multiple variables that take in different values such as strings or numbers as parameters and in different quantities.
Step 2 −Call the variables. If the parameter type and value matches, the variables are displayed. If the parameters don't match, ‘undefined’ is returned.
270 Views
