How optional chaining works in TypeScript ?

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("GeeksforGeeks"));

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 : GeeksforGeeks 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: "GeeksforGeeks"
    }
},
{
    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: "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);

Output:

GeeksforGeeks 20 Noida
GeeksforGeeks undefined Noida
GeeksforGeeks 20 undefined