How to use delete Operator in TypeScript?

Have you ever tried to delete the object properties in TypeScript? Then you definitely came across the ‘delete’ operator.

In TypeScript, the delete operator only allows deleting the undefined, optional, or any object properties. Also, it returns the boolean values according to whether it deletes the property or not.

Below, we will understand the different use cases of the delete operator in TypeScript via different examples.

Using the Delete Operator to Delete the Object Properties

The main use of the delete operator is to delete the optional properties of an object. We can use the delete keyword as an operator and the object property as an operand value. Deleting the object property using the delete keyword deletes the object property and its value.

Syntax

Users can follow the syntax below to use the delete operator. We have used the object property as an operand of the delete operator.

let object: { 
   property1?: string; property2: string 
} = {
   property1: "value1",
   property2: "value2",
};
delete object.property1;

Steps

• Step 1 − Create the interface named objectInteface using the ‘interface’ keyword.

• Step 2 − Define the properties and their type in the interface. We have defined prop1 as a type string, prop2 as a type of boolean, and it is optional and prop3 as a type of number..

• Step 3 − Define the object named obj of type objectInterface, and initialize the object property values.

• Step 4 − Try to delete the prop1 using the delete operator, and it will raise an error as it is not an optional or any type of property.

• Step 5 − Now, delete the prop2 using the delete operator. We can delete it without any error, and it returns the true value on the successful deletion.

Example 1

In the example below, we have used the delete operator to delete the optional properties of the object.

In the output, we can observe that it returns true on the property and its value deletion. Also, when we print the object property after deleting, it prints the undefined.

// Inteface for the objects
// prop2 is an optional
interface objectInterface {
   prop1: string;
   prop2?: boolean;
   prop3: number;
}

// defining the object of type objectInteface
let obj: objectInterface = {
   prop1: "TutorialsPoint",
   prop2: true,
   prop3: 30,
};

// delete the prop2 of obj
console.log("Deleting the prop2 optional property of the obj.");
console.log(console.log(delete obj.prop2));
console.log(
   "Value of the prop2 property of obj, after deleting it is " + obj.prop2
);

On compiling, it will generate the following JavaScript code −

// defining the object of type objectInteface
var obj = {
   prop1: "TutorialsPoint",
   prop2: true,
   prop3: 30
};
// delete the prop2 of obj
console.log("Deleting the prop2 optional property of the obj.");
console.log(console.log(delete obj.prop2));
console.log("Value of the prop2 property of obj, after deleting it is " + obj.prop2);

Output

The above code will produce the following output −

Deleting the prop2 optional property of the obj.
true
undefined
Value of the prop2 property of obj, after deleting it is undefined

Example 2

We have created the object named sample of any type in the example below. It means every property can be of type any, which also includes the optional and undefined.

Users can see that we haven’t declared any property of the sample object optional separately. Still, we can delete them because the whole object is optional.

// Creating the sample object of type any
let sample: any = {
   key: true,
   road_color: "black",
   total: 900,
};

// deleting the sample object's properties
console.log("Deleting the total property ");
console.log(delete sample.total);
console.log("Deleting the whole object");
console.log(delete sample.road_color);

On compiling, it will generate the following JavaScript code −

// Creating the sample object of type any
var sample = {
   key: true,
   road_color: "black",
   total: 900
};

// deleting the sample object's properties
console.log("Deleting the total property ");
console.log(delete sample.total);
console.log("Deleting the whole object");
console.log(delete sample.road_color);

Output

The above code will produce the following output −

Deleting the total property
true
Deleting the whole object
true

Using the Delete Operator to Delete the Global Variables

The delete operator allows only object properties as an operand, but global variables are the properties of the window object. So, we can use the delete operator to delete the global variables.

Also, suppose we directly use the global variable as an operand of the delete operator. In that case, it will raise an error message like “The operand of a delete operator must be a property reference”. To remove the error, we will use the ‘this’ keyword as a reference of the global variable, which refers to the global object.

Syntax

Users can follow the syntax below to delete the global variables using the delete operator.

var gloabl_var1: undefined;
console.log(delete this.gloabl_var1);

Here var1 is a value that needs to be rounded down.

Example

In this example, we are deleting the gloabl_var1 using the delete operator. We have used this keyword as a reference for the global_var1 to use the global variable as a window object's property.

In the output, we see the delete operator returns true, meaning the global variable is deleted successfully. Still, its value is the same because memory also keeps the value of global variables after deleting them.

// To delete global variables, it must be optional or type of any
var gloabl_var1: number | undefined = 6054;
console.log("Deleting the global_var1");

// use this keyword to access global_var1 as a property of the window object
console.log(delete this.gloabl_var1);
console.log(
   "After deleting the global_var1, observing its value which is " + gloabl_var1
);

On compiling, it will generate the following JavaScript code −

// To delete global variables, it must be optional or type of any
var gloabl_var1 = 6054;
console.log("Deleting the global_var1");

// use this keyword to access global_var1 as a property of the window object
console.log(delete this.gloabl_var1);
console.log("After deleting the global_var1, observing its value which is " + gloabl_var1);

Output

The above code will produce the following output −

Deleting the global_var1
true
After deleting the global_var1, observing its value which is 6054

Using the Delete Operator to Delete Array Values

As the array is the instance of the object, we can delete the array values using the delete operator. We can use the single array element as an operand of the delete operator.

Syntax

Users can follow the syntax below to delete the array values using the delete operator. Here, we don’t need to make array properties optional.

let arr: Array<number> = [10,20];
console.log(delete arr[index]);

Example

This example demonstrates deleting the array values using the delete operator. We have defined the array of strings and deleted the value from the first and second indexes.

Also, we can see in the output that values at the first and second indexes become undefined in the message array.

let message: Array<string> = ["Welcome", "To", "The", "TutorialsPoint", "!"];
console.log("Deleting the second and third value of the array respectively.");
console.log(delete message[1]);
console.log(delete message[2]);
console.log("After deleting the second and third value of the array is");
console.log(message[1]);
console.log(message[2]);

On compiling, it will generate the following JavaScript code −

var message = ["Welcome", "To", "The", "TutorialsPoint", "!"];
console.log("Deleting the second and third value of the array respectively.");
console.log(delete message[1]);
console.log(delete message[2]);
console.log("After deleting the second and third value of the array is");
console.log(message[1]);
console.log(message[2]);

Output

The above code will produce the following output −

Deleting the second and third value of the array respectively.
true
true
After deleting the second and third value of the array is
undefined
undefined

We learned to use the delete operator with normal objects, global variables, and arrays. Users need to remember that they can only delete the optional properties of the objects using the delete operator. Otherwise, it will raise an error.

Also, users can use the delete operator with any variable, which is the instance of the object. We can make the object of the function and can delete the function’s properties.