How to Remove a Key from TypeScript Object ?

In TypeScript, objects are mutable, which means you can modify them by adding, updating, or removing properties. Removing a key from an object involves either creating a new object without the specified key or using certain built-in methods to achieve the desired result.

Below are the approaches used to remove a key from TypeScript object:

Approach 1: Using spread operator

This approach involves creating a new object that excludes the key you want to remove. The spread operator (…) is used to copy the existing properties of the object into a new object, excluding the specified key.

Syntax:

const modifiedObject = { ...originalObject, [keyToRemove]: undefined };

Example: In this example, year is removed from originalObject, and the result is stored in newObject.

Javascript

interface MyObject {
    [key: string]: any;
}

const originalObject: MyObject = 
    { name: 'GFG', year: 2024, city: 'Noida' };
console.log("Original Object");
console.log(originalObject);
const keyToRemove: string = 'year';
console.log("After key removal");
const { [keyToRemove]: removedKey, ...newObject } = 
    originalObject;

console.log(newObject);

Output:

Original Object
{ name: 'GFG', year: 2024, city: 'Noida' }
After key removal
{ name: 'GFG', city: 'Noida' }

Approach 2: Using delete keyword

To remove a key from a TypeScript object, you can use the delete operator or create a new object without the specified key.

Syntax:

delete objectName[keyToRemove];

Example: In this example, the age property is removed from the person object using the delete keyword.

Javascript

interface Person {
    name: string;
    age: number;
    city: string;
}

const person: Person = 
    { name: 'Alice', age: 30, city: 'London' };

// Ensuring keyToRemove is a valid key of Person
const keyToRemove: keyof Person = 'age'; 
console.log("Original Object");
console.log(person);

// Deleting the specified key from the object
delete person[keyToRemove]; 

console.log("After key removal");
console.log(person);

Output:

Original Object
{ name: 'Alice', age: 30, city: 'London' }
After key removal
{ name: 'Alice', city: 'London' }

Approach 3: Using Object.assign()

To remove a key from an object using Object.assign(), we create a new object by copying all properties from the original object except for the specified key.

Example: In this example we creates a TypeScript object, removes a specified key using Object.assign() and delete, and logs both the original and modified objects. It’s correct but could benefit from using more TypeScript-friendly methods.

JavaScript

interface MyObject {
    [key: string]: any;
}

const originalObject: MyObject = { name: 'GFG', year: 2024, city: 'Noida' };
console.log("Original Object:");
console.log(originalObject);

const keyToRemove: string = 'year';

// Create a new object without the specified key
const newObject = Object.assign({}, originalObject);
delete newObject[keyToRemove];

console.log("After key removal:");
console.log(newObject);

Output:

Original Object:
{ name: 'GFG', year: 2024, city: 'Noida' }
After key removal:
{ name: 'GFG', city: 'Noida' }