How to use Optional Chaining with Arrays and Functions in TypeScript ?

In this article, we will learn how we can use optional chaining with arrays and functions in TypeScript. Optional chaining in Typescript is mainly a feature that allows us to safely access the properties or the call functions on potentially null or undefined values without causing any runtime errors. We will see three different approaches with implementation in terms of examples.

Below are the possible approaches:

Optional Chaining with Array

In this approach, we are using optional chaining with array elements, where we are accessing the first author in the authors array of the geeksArticle object. We are storing the result in mainAuth, which prints the author name or ‘undefined‘ if the authors array is not defined or empty.

Syntax:

const result = object?.property?.[index]?.method();

Example: Below is the implementation of the above-discussed approach.

interface Approach1 {
    title: string;
    authors?: string[];
}
const geeksArticle: Approach1 = {
    title: 'Top 10 TypeScript Features',
    authors: ['Geek1', 'Geek2', 'Geek3'],
};
const mainAuth: string | undefined = 
    geeksArticle.authors?.[0];
console.log(mainAuth); 

Output:

"Geek1" 

Optional Chaining with Functions

In this approach, we are using optional chaining with function (getAuthFn), the geeksAuthor object has an optional method. The res variable consists of either the return value of the function or the undefined if the function or object is not defined.

Syntax:

const result = object?.method();

Example: Below is the implementation of the above-discussed approach.

type Approach2 = {
    getAuthFn?(): string;
};
const geeksAuthor: Approach2 | undefined = {
    getAuthFn: () => 'Geek1',
};
const res = geeksAuthor?.getAuthFn?.();
console.log(res);

Output:

"Geek1" 

Optional Chaining with Array and Functions

In this approach, we are using optional chaining with both array and functions, where the user is an option with the optional posts array that has posts with properties like likes and the function as getAuthor. We use the optional chaining (?.) for safe access.

Syntax:

const result = object?.property?.[index]?.method?.();

Example: Below is the implementation of the above-discussed approach.

type Approach3 = {
    username: string;
    posts?: {
        title: string; likes?: number;
        getAuthor?(): string
    }[];
};
const user: Approach3 | undefined = {
    username: 'geekUser',
    posts: [
        {
            title: 'Introduction to TypeScript', likes: 20,
            getAuthor: () => 'Geek1'
        },
        {
            title: 'Advanced JavaScript',
            likes: 15
        },
    ],
};
const res1 = user?.posts?.[0]?.likes;
const res2 = user?.posts?.[1]?.getAuthor?.();
console.log(res1);
console.log(res2);

Output:

20
undefined

Using Optional Chaining with Array, Functions, and Ternary Operator

This new approach involves utilizing optional chaining along with a ternary operator for more concise and flexible access to array elements and function calls.

Example:

type Approach4 = {
    username: string;
    posts?: {
        title: string; likes?: number;
        getAuthor?(): string
    }[];
};
const user: Approach4 | undefined = {
    username: 'geekUser',
    posts: [
        {
            title: 'Introduction to TypeScript', likes: 20,
            getAuthor: () => 'Geek1'
        },
        {
            title: 'Advanced JavaScript',
            likes: 15
        },
    ],
};
const res1 = user?.posts?.[0]?.likes ?? 0; // Fallback to 0 if likes property is not present
const res2 = user?.posts?.[1]?.getAuthor?.() ?? 'Unknown Author'; // Fallback to 'Unknown Author' if getAuthor function is not present
console.log(res1);
console.log(res2);

Output:

20 
"Unknown Author"