Typescript - Tips & Tricks - Optional modifier

March 3, 2021

Last updated: September 9, 2021

232 words

Post contents

Hi guys and welcome back, Today I'll talk about the optional modifier. Sometimes we have objects that have some optional properties. In these cases, we need to identify the optional and the required properties, so the consumers can know what is required and what not. To do this in typescript we have a special modifier named "optional" and it is identified by a question mark (?). Let's see an example:

export type Person = {  name: string;  surname: string;  email: string;  phone?: string;};const person1: Person = {  name: "name1",  surname: "surname1",  email: "email1@email1.it",};const person2: Person = {  name: "name2",  surname: "surname2",  email: "email2@email2.it",  phone: "123",};

In this example we can see the optional modifier in action, the "phone" property is marked as optional so in the "person1" object we can avoid setting the "phone" property. This modifier, also, could be used in the functions' parameters if we have one or more optional parameters. A simple example.

function printPerson(name: string, email: string, phone?: string): void {  console.log(`Name: ${name}`);  console.log(`Email: ${email}`);  if (phone) console.log(`Phone: ${phone}`);}printPerson("name1", "email1@email1.it");/*  Name: name1  Email: email1@email1.it*/printPerson("name2", "email2@email1.it", "123");/*  Name: name2  Email: email2@email1.it  Phone: 123*/

We can see how in the first example we can avoid setting the phone parameter because it's optional.

From the optional modifier, it's all. See you soon guy!

Subscribe to our newsletter!

Subscribe to our newsletter to get updates on new content we create, events we have coming up, and more! We'll make sure not to spam you and provide good insights to the content we have.