How to specify optional properties in TypeScript?

We will learn to specify the option properties in TypeScript. The true meaning of the optional property is that properties can be undefined or null, and we can initialize them whenever required.

In real-time development, the importance of optional properties is very much. For example, we are fetching the data from the API and performing some operations on the data. If you try to use the data without getting it due to the database server being down or if there is any other problem, it will raise an error. In such case, we can make the data property optional and check that if data is available, only move ahead with other code.

Syntax

We can follow the syntax below to make the property optional. Here, the question mark is used to make the property optional. The optionalProp is the optional property in the below syntax.

interface sample {
   prop1: number;
   optionaProp?: string;
}

Example 1

In this example, we have created the sample interface containing the two optional properties named optionalProp, and optionalProp2. In the object, we haven’t added the optionalProp2, and still, we can compile our TypeScript code without any error.

Also, we can’t access the optional properties by taking the object as a reference if we haven’t defined them inside the object.

// Creating the sample interface with two optional properties
interface sample {
   prop1: string;
   optionalProp?: number;
   optionlProp2?: boolean;
}

// Creating the object of type sample
let object: sample = {
   prop1: "Hello!",
   optionalProp: 20,
};

// Accessing the object properties one by one
console.log("The value of prop1 is " + object.prop1);
console.log("The value of optionalProp is " + object.optionalProp);

// We can't access the optionalProp2 by taking the object as a refernce, as we haven't defined it.

// console.log("The value of optionalProp2 is " + object.optionalProp2);

On compiling, it will generate the following JavaScript code:

// Creating the object of type sample
var object = {
   prop1: "Hello!",
   optionalProp: 20
};

// Accessing the object properties one by one
console.log("The value of prop1 is " + object.prop1);
console.log("The value of optionalProp is " + object.optionalProp);

// We can't access the optionalProp2 by taking the object as a refernce, as we haven't defined it.

// console.log("The value of optionalProp2 is " + object.optionalProp2);

Output

The above code will produce the following output −

The value of prop1 is Hello!
The value of optionalProp is 20

Example 2

In this example, we have passed the optional parameters to the function. We can use the ‘?’ Operator to make function parameters, as we make the object properties optional.

It is recommended to pass the optional parameter to the function after all required parameters; otherwise, while passing the arguments to the function, users can get errors related to the parameter type.

// Function with three parameters containing the one parameter optional
function printParameters(param1: string, param2: number, param3?: boolean) {
   console.log("The value of the param 1 is " + param1);
   console.log("The value of the param 2 is " + param2);
   console.log("The value of the param 3 is " + param3);
}

// Invoking the function with an optional parameter
printParameters("TutorialsPoint", 10, true);

// Invoking the function without an optional parameter
printParameters("TypeScript", 230);

On compiling, it will generate the following JavaScript code −

// Function with three parameters containing the one parameter optional
function printParameters(param1, param2, param3) {
   console.log("The value of the param 1 is " + param1);
   console.log("The value of the param 2 is " + param2);
   console.log("The value of the param 3 is " + param3);
}

// Invoking the function with an optional parameter
printParameters("TutorialsPoint", 10, true);

// Invoking the function without an optional parameter
printParameters("TypeScript", 230);

Output

The above code will produce the following output −

The value of the param 1 is TutorialsPoint
The value of the param 2 is 10
The value of the param 3 is true
The value of the param 1 is TypeScript
The value of the param 2 is 230
The value of the param 3 is undefined

Example 3

In the example below, we haven’t defined the data3 property inside the object, as it is optional. Also, users can learn how we are using the optional properties in the if condition.

It is always good practice to use the question mark and dot operator to access the optional property of any object to avoid errors.

// Creating the apiData interface
interface apiData {
   data1: string,
   data2?: string,
   data3?: string,
}

// Creating the apiDataObject without and data3 optional property
let apiDataObject: apiData = {
   data1: "Data Recived!",
   data2: "Also Recived!"
}

// Here, we have used the question mark to access the optional property
if(apiDataObject?.data2){
   console.log("The data 2 is avialable in the object");
}

if(apiDataObject?.data3){
   console.log("The data 3 is avialable in the object");
}

On compiling, it will generate the following JavaScript code −

// Creating the apiDataObject without and data3 optional property
var apiDataObject = {
   data1: "Data Recived!",
   data2: "Also Recived!"
};

// Here, we have used the question mark to access the optional property
if (apiDataObject.data2) {
   console.log("The data 2 is avialable in the object");
}

if (apiDataObject.data3) {
   console.log("The data 3 is avialable in the object");
}

Output

The above code will produce the following output −

The data 2 is avialable in the object

We learned to use the optional properties in TypeScript in this tutorial. We can just use the ‘?’ to make the property optional. Also, we can make the function parameter optional. Furthermore, we learned to use the optional properties without getting any errors.