Explain the concept of null and its uses in TypeScript

In TypeScript, ‘null’ refers to the data type or value. The null is a keyword in TypeScript, which we can use to represent the absent or empty value. So, we can use ‘null’ to define the variable's data-type or initialize the variable.

In this tutorial, we will learn the different use cases of the null value and data type in TypeScript.

Syntax

Users can follow the syntax below to use the null keyword as a data type or value.

let null_var: null = null; 

In the above syntax, ‘null’ refers to the data type of the null_var named variable, and we have initialized it with the null value.

TypeScript is a type-strict language. So, we need to define the data type of the variable. If we want to define the variable with an empty value, we need to define that variable of type Null.

Example

In the example below, we have created the null_var variable of type null and initialized it with the null value. After that, we printed the value of the null_var, which prints the null.

The purpose of the below example is to show what the value variable contains when we assign the null values to it.

// defining the variable of type null and initialized with the null value
let null_var: null = null;
console.log("The value of null_var is " + null_var);

On compiling, it will generate the following JavaScript code −

// defining the variable of type null and initialized with the null value
var null_var = null;
console.log("The value of null_var is " + null_var);

Now, we will learn the use case of the null in real-time development. For example, you have created the variable and need to initialize it after fetching the value from the database. So, when you declare the variable, you can initialize it with the null, and when data fetch completes from the database, you can initialize with the data. It is useful when you want to perform some operation with that variable but only when it is not null and initialized with some values.

Example

In the example below, we have declared the data variable of type number or null. We initialized with the null value first and, using the if condition to check if data was available, printed the data.

After that, we initialized the data variable with a number and again used the ‘if ‘ statement to check the existence of the value of the data and print the message accordingly.

// declaring the data variable of type null or number
let data: null | number = null;

// If data is available, print the data
if (data) {
   console.log(data);
}

// think about fetching data from the database and initializing with the value.
data = 10;

// if data is not null, print the message
if (data) {
   console.log("The value of the data is " + data);
}

On compiling, it will generate the following JavaScript code −

// declaring the data variable of type null or number
var data = null;

// If data is available, print the data
if (data) {
   console.log(data);
}

// think about fetching data from the database and initializing with the value.
data = 10;

// if data is not null, print the message
if (data) {
   console.log("The value of the data is " + data);
}

The purpose of the above example is to demonstrate that we can declare the variable without the real value by initializing it with null values. Later, we can initialize the variable via real values.

Handling null variables

We learned to declare the null variables, but now we need to learn how to handle the null variables. The simplest way is using the if statement. Inside the if statement condition, we check whether the variable value is null. But there are other ways also to handle the null variables.

Use the Optional Chaining

The optional chaining allows us to define the optional properties for the class and objects. However, we can handle the null variables using optional chaining. We can use the question mark (?) operator to make any property optional.

Syntax

Users can follow the syntax below to handle the null variables using the optional chaining.

interface sample {
   property?: type;
}

Example

In this example, we have created the interface which contains the optional age property. We defined the object of sample type and haven’t declared age inside that as it is an optional property

// interface for object
interface sample {
   id: string;
   name: string;
   age?: number;
}

// age is optional, so you don't need to define it
let object: sample = {
   id: "20232",
   name: "shubham",
};

// accessing the age
let age_var: number | undefined = object.age;
console.log("The value of age_var is " + age_var);

On compiling, it will generate the following JavaScript code −

// age is optional, so you don't need to define it
var object = {
   id: "20232",
   name: "shubham"
};

// accessing the age
var age_var = object.age;
console.log("The value of age_var is " + age_var);

We learned the various use cases of null and how to handle null variables in this tutorial. So, when users are not sure about the value of the variable and want to initialize it with its other values later, they should initialize the variable with null values rather than initialize it with random values.