How do I Remove an Array Item in TypeScript?

In this article, we will learn about the different ways of removing an item from an array in TypeScript. In TypeScript, an array can be defined using union typing if it contains items of different types.

We can use the following methods to remove items from a TypeScript array:

Using the splice() method

The splice method can be used to delete multiple elements by specifying the start index from where the deletion of the element will start and the number of elements to be deleted as parameters to it. This method will return the removed elements.

Syntax:

const remItems = array.splice(startIndex, numberOfElementsToBeDeleted);

Example: The below code example will explain the use of the splice() method to delete elements from a TypeScript array.

Javascript

const testingArr: (number | string)[] =
    ["JavaScript", 1, "GeeksforGeeks", 2, "TypeScript"];

console.log(`Initial Array: ${testingArr}`);
// Using the splice() method
const remItem = testingArr.splice(3, 2);
console.log(`Removed Items: ${remItem}`)
console.log(`Array After removing item: ${testingArr}`);

Output:

Initial Array: JavaScript, 1, GeeksforGeeks, 2, TypeScript
Removed Items: 2, TypeScript
Array After removing item: JavaScript, 1, GeeksforGeeks

Using the shift() method

The shift() method is used to remove the item from the start of an array and it returns the removed item as result. It requires no parameters.

Syntax:

const remItem = array.shift();

Example: The below example will explain the use of the shift() method to remove element from TypeScript array.

Javascript

const testingArr: (number | string)[] =
    ["JavaScript", 1, "GeeksforGeeks", 2, "TypeScript"];

console.log(`Initial Array: ${testingArr}`);
// Using the shift() method
const remItem = testingArr.shift();
console.log(`Removed Item: ${remItem}`)
console.log(`Array After removing item: ${testingArr}`);

Output:

Initial Array: JavaScript, 1, GeeksforGeeks, 2, TypeScript
Removed Item: JavaScript
Array After removing item: 1, GeeksforGeeks, 2, TypeScript

Using the pop() method

The pop() method will delete the last element of the array without passing any parameter. It returns the removed element as a result.

Syntax:

const remItem = array.pop();

Example: The below example will explain the use of the pop() method to delete element from an array.

Javascript

const testingArr: (number | string)[] =
    ["JavaScript", 1, "GeeksforGeeks", 2, "TypeScript"];

console.log(`Initial Array: ${testingArr}`);

// Using the pop() method
const remItem = testingArr.pop();
console.log(`Removed Item: ${remItem}`)
console.log(`Array After removing item: ${testingArr}`);

Output:

Initial Array: JavaScript, 1, GeeksforGeeks, 2, TypeScript
Removed Item: TypeScript
Array After removing item: JavaScript, 1, GeeksforGeeks, 2

Using filter() method

The filter() method filter the array based on the condition of the passed callback function. It returns a new array with new length and new elements.

Syntax:

const newArr = array.filter(() => {});

Example: The below code implements the filter() method to remove element at 4th index from the TypeScript array.

Javascript

const testingArr: (number | string)[] =
    ["JavaScript", 1, "GeeksforGeeks", 2, "TypeScript"];

console.log(`Initial Array: ${testingArr}`);
// Using the fiter() method
const newArr = testingArr.filter((ele, ind) => ind !== 4);
console.log(`Removed Item: ${testingArr[4]}`);
console.log(`Array After removing item: ${newArr}`);

Output:

Initial Array: JavaScript, 1, GeeksforGeeks, 2, TypeScript
Removed Item: TypeScriptArray 
After removing item: JavaScript, 1, GeeksforGeeks, 2

Using the delete operator

The delete operator can also be used to delete the array items in TypeScript.

Syntax:

delete array_name[deletingItemIndex];

Example: The below example explain the use of the delete operator to remove the item from an array in TypeScript.

Javascript

const testingArr: (number | string)[] =
    ["JavaScript", 1, "GeeksforGeeks", 2, "TypeScript"];

console.log(`Initial Array: ${testingArr}`);
// Using delete operator
console.log(`Removed Item: ${testingArr[0]}`);
delete testingArr[0];
console.log(`Array After removing item: ${testingArr}`);

Output:

Initial Array: JavaScript, 1, GeeksforGeeks, 2, TypeScript
Removed Item: JavaScript
Array After removing item: , 1, GeeksforGeeks, 2, TypeScript