What is an omit keyword in TypeScript?
So, what exactly is the Omit keyword in TypeScript?
The Omit keyword in TypeScript is a utility type that lets you create a new type by removing certain properties from an existing type.
This can be incredibly useful when you need a type that is almost identical to another type but without certain properties.
Syntax:
Omit<Type, Keys>Here’s an illustration of how you can use it:
type YourNewType = Omit<ExistingType, 'PropertyYouWantToRemove'>;In this example, ExistingType is the type you’re starting with, and ‘PropertyYouWantToRemove‘ is the property you want to exclude from the new type.
interface XYZ{
x: number;
y: number;
z: number;
}So, Omit is a great way to make your TypeScript code more flexible by allowing you to create new types based on existing ones, but with some properties removed. It’s a powerful tool in your TypeScript toolbox!
How to use the Omit keyword in TypeScript?
As we have mentioned earlier, the Omit keyword in TypeScript allows you to construct a new type by removing certain properties from an existing type.
Here’s a step-by-step guide on how to use it:
Step 1: Define the Original Type
This is the type from which you want to omit properties.
For example, let’s say we have an interface Employee:
interface Employee{
name: string;
age: number;
address: string;
}Step 2: Use the Omit Keyword
The Omit keyword in TypeScript is utilized with the format Omit.
Here, OriginalType represents the type from which you wish to exclude properties, and KeysToOmit stands for a union of keys (expressed as strings) that you intend to exclude.
For instance, if we want to create a new type EmployeeWithoutAddress that excludes the address property from the Person type, we can do:
type EmployeeWithoutAddress = Omit<Person, 'address'>;Now, EmployeeWithoutAddress emerges as a new type that retains the same properties as Person, with the exception of the address property.
Step 3: Use the New Type
You can now use EmployeeWithoutAddress as a type in your TypeScript code.
For example:
let employee: EmployeeWithoutAddress = {
name: "Itsourcecode",
age: 18
};Thus, if you attempt to access a property that has been omitted, TypeScript will flag an error during the development phase.
However, it’s worth noting that this property can still be assigned and retrieved during the program’s execution.
Here’s the complete code:
// Define the original interface
interface Employee {
name: string;
age: number;
address: string;
}
// Use the Omit keyword to create a new type
type EmployeeWithoutAddress = Omit<Employee, 'address'>;
// Now you can use the new type
let employee: EmployeeWithoutAddress = {
name: "Isourcecode",
age: 18
};
console.log(employee); Output:
{ name: 'Isourcecode', age: 18 }Example Code for Simplifying the Objects
Think about having a type that stands for a user, and you want a new type that doesn’t have private details like a password.
You can do this with the Omit keyword in TypeScript. It’s like creating a new user type but leaving out the password.
// Define the original interface
interface Admin {
id: number;
name: string;
email: string;
password: string;
}
// Use the Omit keyword to create a new type
type PublicAdmin = Omit<Admin, 'password'>;
// Now you can use the new type
let admin: PublicAdmin = {
id: 1,
name: "Itsourcecode",
email: "itsc.com"
};
console.log(admin);
Output:
{ id: 1, name: 'Itsourcecode', email: 'itsc.com' }What is the difference between Omit and Pick in TypeScript?
The omit keyword removes certain properties from an existing type.
You have to specify which properties you don’t want, and it creates a new type without those properties.
Example:
You have a type for a User with ID, name, email, and age. If you want a type that has everything except email and age:
type StudentWithoutEmailAndAge = Omit<Student, 'email' | 'age'>;
// Now StudentWithoutEmailAndAge has only `id` and `name`.Here’s the complete code:
interface Student {
id: number;
name: string;
email: string;
age: number;
}
type StudentWithoutEmailAndAge = Omit<Student, 'email' | 'age'>;
// UserWithoutEmailAndAge is equivalent to:
// {
// id: number;
// name: string;
// }
// Example usage:
const student: StudentWithoutEmailAndAge = {
id: 0001,
name: "Itsourcecode"
};
console.log(student);
Output:
{ id: 1, name: 'Itsourcecode' }On the other hand, the pick keyword keeps only certain properties from an existing type.
You have to specify which properties you want, and it creates a new type with just those properties.
Example:
Using the same User type, if you only want a type with name and email:
type StudentNameAndEmail = Pick<Student, 'name' | 'email'>;
// Now StudentNameAndEmail has only `name` and `email`.Here’s the complete code:
interface Student {
id: number;
name: string;
email: string;
age: number;
}
type StudentNameAndEmail = Pick<Student, 'name' | 'email'>;
// UserNameAndEmail is equivalent to:
// {
// name: string;
// email: string;
// }
const studentNameAndEmail: StudentNameAndEmail = {
name: "Itsourcecode",
email: "itsc.com"
};
console.log("StudentNameAndEmail:", studentNameAndEmail);Output:
StudentNameAndEmail: { name: 'Itsourcecode', email: 'itsc.com' }In simple understanding, the key difference is that the omit keyword removes parts you don’t need, and the pick keyword chooses only the parts you do need.
So, omit helps you create a new type by leaving out some properties, while pick helps you create a new type by selecting only specific properties.
Conclusion
In conclusion, we’re done learning the Omit keyword in TypeScript, which is a useful tool that makes your code easier to read and manage by removing unneeded properties from types.
It helps simplify objects or change complex types, improving your development process and reducing mistakes.
I hope this article has helped you understand TypeScript Omit.
If you have any questions or inquiries, please don’t hesitate to leave a comment below.