In this article, we will try to understand how we could perform as well as analyze the working of optional chaining in TypeScript.
TypeScript Optional Chaining:
- TypeScript Optional Chaining is the process of searching and calling variables, methods, parameters that might be nil in existence.
- This particular feature allows the developers to stop encountering the errors which generally come up if things are not defined, and also they could easily handle the undefined things with this particular feature.
How does Optional Chaining work?
- Optional Chaining actually works in a bit of a tricky manner, wherein it first checks the availability of a particular variable or a function.
- If that variable or function is available in the file, then it proceeds with checking the further mentioned variable or function.
- If that variable is not available, it immediately stops checking further and returns “undefined” which a user could easily handle with certain logic.
Let us first analyze how we could make our parameter (when we work in function) or a variable as an optional variable in TypeScript.
Syntax of declaring an optional parameter: Following syntax, we may use in order to make variables as optional in TypeScript (“?” this operator is used for making any variable as optional in TypeScript)-
parameter_name? : return_type
Example 1: In this example, we will be implementing the above-illustrated syntax with an example.
Javascript
let displayName = (firstName: string , lastName? : string) => { return "Name : " + firstName + " " + lastName; } console.log(displayName("Hello", "World")); console.log(displayName("neveropen")); |
Output: Above illustrated code will generate output for both, but in the case of a single parameter so passed it would generate an error, it will just display “undefined”.
Name : Hello World Name : neveropen undefined
Now that we have understood how we may declare an optional parameter in TypeScript. Let us now see how we may perform optional chaining in TypeScript using the following examples-
Example 2: In this example, we would be implementing optional chaining while displaying the result or the output.
Javascript
type User = { id: number; name?: { firstName: string; lastName?: string; } }; const users: User[] = [{ id: 1, name: { firstName: "neveropen" } }, { id: 2, name: { firstName: "Hello", lastName: "World" } }, { id: 3 }, ]; users.map(element => console.log(element.name?.lastName)); |
Output:
undefined World undefined
Example 3: In this example, we will show Optional Chaining in different styles or techniques.
Javascript
type personDetails = { name : string, details? : { age?: number, location?: string, } } let person_one: personDetails = { name: "neveropen", details : { age: 20, location: "Noida" } } let person_two: personDetails = { name: "neveropen", details : { location: "Noida" } } let person_three: personDetails = { name: "neveropen", 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); |
Output:
neveropen 20 Noida neveropen undefined Noida neveropen 20 undefined
