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

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.
}

Solution 1:

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:

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:

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:

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.

Recommended

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).