What is the logic behind the TypeScript error "The operand of a 'delete' operator must be optional"?

JavascriptTypescript

Javascript Problem Overview


This is the new error that is coming in typescript code.

I am not able to realize the logic behind it
Documentation

/*When using the delete operator in strictNullChecks, 
the operand must now be any, unknown, never, or be optional 
(in that it contains undefined in the type). Otherwise, use of the delete operator is an error.*/

interface Thing {
  prop: string;
}

function f(x: Thing) {
  delete x.prop; // throws error = The operand of a 'delete' operator must be optional.
}

Javascript Solutions


Solution 1 - Javascript

> I am not able to realize the logic behind it

The logic as I understand is the following:

Interface Thing is a contract asking to have a (non-null, non-undefined) prop as a string.

If one removes the property, then the contract is not implemented anymore.

If you want it still valid when removed, just declare it as optional with a ?: prop?: string

I'm actually surprised that this was not causing error in earlier versions of TypeScript.

Solution 2 - Javascript

The logic behind of this, is that you need to implement your interface with an optional property like this:

interface Thing {
  prop?: string;
}
// OR
interface Thing {
  prop: string | undefined;
}

function f(x: Thing) {
  delete x.prop; 
}

So the interface's contract won't be broken.

Solution 3 - Javascript

Another implementation if you want it to exist:

interface Thing {
  prop: string;
}
interface PropoptionalThing {
  prop?: string;
}

function f(x: Thing): PropoptionalThing {
  let tmp: PropoptionalThing = x;
  delete tmp.prop;
  return tmp;
}

Solution 4 - Javascript

You could change the type of x to a partial:

function f(x: Partial<Thing>) {
  delete x.prop;
}

But I don't usually like to mutate (modify) objects which have been passed to me from possibly unknown code. So I would usually make a new object instead:

function f(x: Thing) {
  const y = { ...x } as Partial<Thing>;
  delete y.prop;
}

Since Partial makes all the properties optional, this will allow you to delete anything from y.

To be more specific, you could use PartialBy (one liner) or SetOptional (from type-fest):

  const y = { ...x } as PartialBy<Thing, 'prop1' | 'prop2'>;

That would make prop1 and prop2 optional but keep all other properties mandatory (required).

Solution 5 - Javascript

The prop property in Thing interface must be mark as optional using ? mark.

then your Thing interface must be like this.

interface Thing {
  prop?: string;
}

Solution 6 - Javascript

Maybe this can helpful

const { propToDelete, ...otherProps} = youObject
return otherProps

with that you can use otherProps object without break out

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAkshay Vijay JainView Question on Stackoverflow
Solution 1 - JavascriptPac0View Answer on Stackoverflow
Solution 2 - JavascriptTiago VaccariView Answer on Stackoverflow
Solution 3 - Javascript0xLogNView Answer on Stackoverflow
Solution 4 - JavascriptjoeytwiddleView Answer on Stackoverflow
Solution 5 - JavascriptRajitha UdayangaView Answer on Stackoverflow
Solution 6 - JavascriptEdgar OlivarView Answer on Stackoverflow