The operand of a ‘delete’ operator must be optional error occurs when you try to use delete operator in strictNullChecks to delete the property that is marked as required.
In this article, we will take a look at what is The operand of a ‘delete’ operator must be optional error means and how to resolve this issue with examples.
What is The operand of a ‘delete’ operator must be optional error?
The operand of a ‘delete’ operator must be optional error occurs when utilizing the delete operator in strictNullChecks, the operand should be any, not known, never, or optional. Otherwise, the use of the delete operator is a fallacy.
Let us take a simple example to reproduce this issue.
In the below Test interface the property propVal is marked as required and in the Testfunc() method we are trying to delete the same property which leads to the error.
interface Test {
propVal: string;
}
function Testfunc(y: Test) {
delete y.propVal;
// The values passed to a 'delete' operator must be optional.
}How to resolve the operand of a ‘delete’ operator must be optional error?
There are multiple ways to resolve the error. Let us take a look at each of these solution in details.
Solution 1 – Mark it as Optional using the ? operator for objects
One resolution to this error can be to make the property optional using the ‘?’ character. Let us see how this works.
const nameObj: { name?: string } = { name: 'Ravi' };
console.log("Before Deleting the property", nameObj);
delete nameObj['name']; // no error
console.log("After Deleting the property", nameObj);
Output
"Before Deleting the property", {
"name": "Ravi"
}
"After Deleting the property", {} In this example, we create a constant object named nameObj with name as property. The property can be string/undefined but most important it is declared optional.
name?: string | undefined
Now, we may or may not assign it a value. When we try to delete it using the delete operator, it does not give an error.
After deleting the name property you can notice that the nameObj does returns empty object.
Solution 2: Using logical OR to mark it as optional in case of Interface
If you are using the interface and deleting the properties inside the interface then it is best to mark it as optional using the logical OR operator “|” It is also called as an union operator. Let us take an example to demonstrate the same.
interface Test {
propVal: string | undefined;
}
function Testfunc(y: Test) {
delete y.propVal; // No error
}
Solution 3: Using Partial<Type> Utility for Interface
Partial<Type> – Constructs a type with all properties of Type set to optional. This utility will return a type that represents all subsets of a given type.
Let’s look at how we can resolve this problem.
interface Book {
name?: string;
}
const obj: Book = { name: 'Let us C' };
delete obj['name'];
console.log(obj); // {}It is a simple example of, how we use the same approach with Interfaces. There are cases when we do not have complete direct access to the interface. For such a scenario, we use the Partial utility type to create a new type with all properties made optional.
Look out for the code snippet below on how to use Partial<Type>
interface Book {
name: string;
}
const objBook: Partial<Book> = { name: 'Let us C' };
delete objBook['name'];
console.log(objBook); // {}In the above example, the interface Book has a mandatory property name. Hence to make sure that we make it optional before using the delete operator, we use the Partial utility.
const objBook: Partial<Book> = { name: 'Let us C' };
There might be a case when we may want to make a few properties optional and others not. We use the Pick and Omit utility for this. Let us understand this better.
interface Book {
name: string;
author: string;
cost: string;
}
const objBook: Partial<Pick<Book, 'name' | 'cost'>> &
Omit<Book, 'name' | 'cost'> = {
name: 'Let us C',
author: 'Kanetkar',
cost: '$2',
};
delete objBook['name'];
delete objBook['cost'];
console.log(objBook);Output
{author: Kanetkar}In the above snippet, we select the name and cost property as optional using the Pick and Omit utility. The author value is left optional.
Conclusion
The operand of a ‘delete’ operator must be optional error occurs when you try to delete the properties in interfaces or objects that are marked as required using the delete operator.
We can resolve the issue by marking the properties as optional using the ? operator, in case of interface we can leverage Partial<Type> as well as Logical OR “|” operator to mark it as optional.
Srinivas
