What is the alternative method for removing a property from an object in Typescript without triggering the 'delete' operator must be optional error?

Question

What is the alternative method for removing a property from an object in Typescript without triggering the 'delete' operator must be optional error?

After researching how to delete a property from an object, I came across this helpful thread on Stack Overflow. The recommended method is to use the delete keyword. So, I attempted it like this:

const eventData = {...myEvent};
delete eventData.coordinate;

However, I encountered an error which looked like this:

https://i.sstatic.net/uDF2g.png

The operand of a 'delete' operator must be optional.ts(2790)

Further research led me to another discussion on Stack Overflow, where it was suggested that changing the tsconfig.json file could resolve this issue:

{
  "compilerOptions": {
    ...
     "strictNullChecks": false, 
    }
    ...
}

However, implementing this change would mean sacrificing null checking. So, my question remains: how can I delete a property from an object in Typescript without encountering the 'operand of a 'delete' operator must be optional' error?

typescript

Answer 1

Answer №1

In Typescript, a warning is issued when you break the contract (the object no longer has the required property). One way to handle this is by omitting the property when cloning the object:

const myEvent = {
    coordinate: 1,
    foo: 'foo',
    bar: true
};

const { coordinate, ...eventData } = myEvent;
// eventData will have type { foo: string; bar: boolean; }

Try it out

For delete, operands must be optional. When using the delete operator with strictNullChecks, the operand must be of type any, unknown, never, or be optional (meaning it includes undefined in the type). Otherwise, using delete will result in an error.

Answer №2

Personally, I developed a custom function utilizing generics, and it performed admirably!

const removeObjectAttribute = <O extends object, A extends keyof O>(
  obj: O,
  attribute: A
): Omit<O, A> => {
  const newObj = { ...obj }

  if (attribute in newObj) {
    delete newObj[attribute]
  }

  return newObj
}

The utilization of the two generics O and A is what makes this function special, particularly the A generic: extends keyof O specifies that "the second parameter must be an attribute from the object".

Within the function itself, TypeScript can guarantee that attribute is indeed an attribute from the obj. By using the attribute in newObj if statement, I ensure that everything is secure at runtime as well - just good defensive programming.

The line const newObj = { ...obj } ensures that we are not modifying the original reference passed as argument, but returning a new reference instead. This practice stems from my days practicing functional programming.

If we were to test this function:

const result = removeObjectAttribute({ x: 1, y: 2 }, 'x')
// returns as type `Omit<{x: 1, y: 2}, 'x'>` which equals `{x: 1}`

const result2 = removeObjectAttribute({ x: 1, y: 2 }, 'z') 
// TypeScript throws an error since `'z'` is not a valid key for the given object

Answer 4

Personally, I developed a custom function utilizing generics, and it performed admirably!

const removeObjectAttribute = <O extends object, A extends keyof O>(
  obj: O,
  attribute: A
): Omit<O, A> => {
  const newObj = { ...obj }

  if (attribute in newObj) {
    delete newObj[attribute]
  }

  return newObj
}

The utilization of the two generics O and A is what makes this function special, particularly the A generic: extends keyof O specifies that "the second parameter must be an attribute from the object".

Within the function itself, TypeScript can guarantee that attribute is indeed an attribute from the obj. By using the attribute in newObj if statement, I ensure that everything is secure at runtime as well - just good defensive programming.

The line const newObj = { ...obj } ensures that we are not modifying the original reference passed as argument, but returning a new reference instead. This practice stems from my days practicing functional programming.

If we were to test this function:

const result = removeObjectAttribute({ x: 1, y: 2 }, 'x')
// returns as type `Omit<{x: 1, y: 2}, 'x'>` which equals `{x: 1}`

const result2 = removeObjectAttribute({ x: 1, y: 2 }, 'z') 
// TypeScript throws an error since `'z'` is not a valid key for the given object

Answer 5

Answer №3

If the property is optional, feel free to remove it

interface OptionalCoordinate {
   coordinate?
}

const eventData: OptionalCoordinate = {...myEvent}; // Assuming myEvent is an object of type `Event`
// It is safe to omit this line
delete eventData.coordinate;

Answer 6

If the property is optional, feel free to remove it

interface OptionalCoordinate {
   coordinate?
}

const eventData: OptionalCoordinate = {...myEvent}; // Assuming myEvent is an object of type `Event`
// It is safe to omit this line
delete eventData.coordinate;

Answer 7

Answer №4

To prevent the mistake, simply cast to any:

const person = {
    first: 'john',
    middle: 'wayne',
    last: 'doe'
};

delete (person as any).middle

console.log(person)
// { first: 'john', last: 'doe' }

Answer 8

To prevent the mistake, simply cast to any:

const person = {
    first: 'john',
    middle: 'wayne',
    last: 'doe'
};

delete (person as any).middle

console.log(person)
// { first: 'john', last: 'doe' }

Answer 9

Answer №5

The error message indicates that the property coordinate is not considered optional in the object, meaning it can be undefined, and you are attempting to delete it.

If the property were optional, you would have been able to delete it.

coordinate?: FirebaseFirestore.Geopoint

This change seems to have occurred after version 4.0, for more information you can visit this link.

Answer 10

The error message indicates that the property coordinate is not considered optional in the object, meaning it can be undefined, and you are attempting to delete it.

If the property were optional, you would have been able to delete it.

coordinate?: FirebaseFirestore.Geopoint

This change seems to have occurred after version 4.0, for more information you can visit this link.

Answer 11

Answer №6

When working with an array of properties as input, @Loïc Goyet's approach remains effective:

function excludeProperties<T extends Record<string, unknown>, K extends keyof T>(
  obj: T,
  propertiesToExclude: K[],
): Omit<T, K> {
  const result = { ...obj };
  for (const key of propertiesToExclude) {
    delete result[key];
  }
  return result;
}

const y = excludeProperties({ alpha: 1, beta: 2, gamma: 3 }, ['alpha', 'beta']);
// const y: Omit<{
//   alpha: number;
//   beta: number;
//   gamma: number;
// }, "alpha" | "beta">

Answer 12

When working with an array of properties as input, @Loïc Goyet's approach remains effective:

function excludeProperties<T extends Record<string, unknown>, K extends keyof T>(
  obj: T,
  propertiesToExclude: K[],
): Omit<T, K> {
  const result = { ...obj };
  for (const key of propertiesToExclude) {
    delete result[key];
  }
  return result;
}

const y = excludeProperties({ alpha: 1, beta: 2, gamma: 3 }, ['alpha', 'beta']);
// const y: Omit<{
//   alpha: number;
//   beta: number;
//   gamma: number;
// }, "alpha" | "beta">

Answer 13

Answer №7

It has been noted by numerous individuals that the method below is functional, but not advisable due to its lack of type safety:

/* eslint-disable @typescript-eslint/no-explicit-any */
delete (eventData as any).coordinate;

Answer 14

It has been noted by numerous individuals that the method below is functional, but not advisable due to its lack of type safety:

/* eslint-disable @typescript-eslint/no-explicit-any */
delete (eventData as any).coordinate;

What is the alternative method for removing a property from an object in Typescript without triggering the 'delete' operator must be optional error?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Encountering a type error with gatsby-plugin-dark-mode in a Typescript Gatsby setup

Assigning value to a member variable in a TypeScript Angular class

Create Angular file structures effortlessly using a tool similar to Rails scaffold

Tips for displaying an element for each item chosen in a multi-select box

Having trouble locating a property with the findByType function?

The integration of ngx-translate with an HTTP interceptor is currently experiencing difficulties

What is the reason for having a filled array containing data on currency exchange rates within an asynchronous function, while simultaneously having an empty array located outside of it? - React

Guide to crafting a personalized parameter decorator for extracting the user from a request

Incorporating TypeScript into a React-Native Expo development venture

Why is it considered an error when an index signature is missing in a type?

Passing data from child components to parent components in NextJs using Typescript

Extract the string values of a specific property from an array of objects using Typescript

How to retrieve a component's property within an Angular2 provider?

The object does not contain a 'navigation' property within the 'Readonly<{}> & Readonly<{ children?: ReactNode; }>' type

Issue: Pipe 'AsyncPipe' received an invalid argument '[object Object]'

What could be the reason behind Next.js attempting to import a non-existent stylesheet?

Deploy identical AWS CDK resources and stacks using various pipelines in Typescript

Angular: ngModelChange not updating value in dropdown menu

Having trouble utilizing a function with an async onload method within a service in Angular - why does the same function work flawlessly in a component?

Can you explain the difference between a public app and express.Application?