How to use Optional Chaining with Array, Functions, and Ternary Operator In Typescript
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"
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:
Table of Content
- Optional Chaining with Array
- Optional Chaining with Functions
- Optional Chaining with Array and Functions
Contact Us