This content originally appeared on DEV Community and was authored by Sachin Chaurasiya
I have been working with typescript for almost a year now, and I have learned and implemented a lot in this time. Among the things, I enjoy most about typescript are the utility types that allow me to write better code, so today I will discuss the 6 most useful utility types that will help you write better code.
So let's get started,
Record
If you want to construct an object type with a set of properties keys of type types then the Record is the best utility type to use.
Example
You want to create an object type to store the user's information, here you can use the Record utility to achieve the same.
// Our user ID will be a string
type UserID = string
// Defining our available user information types
type UserInfo = "name" | "email" | "avatarUrl"
const users: Record<UserID, UserInfo> = {
"uuid1": { "name": "user1", "email": "user1@gmail.com", "avatarUrl": "https://user1.com/avatar.png" },
"uuid2": { "name": "user2", "email": "user2@gmail.com", "avatarUrl": "https://user2.com/avatar.png" },
"uuid3": { "name": "user3", "email": "user3@gmail.com", "avatarUrl": "https://user3.com/avatar.png" }
}
If you try to add any other type that does not exist in the
UserInfotype, the typescript will give a compile error.
Partial
The Partial utility type is very useful when you want to use an existing type but want all the properties to be optional.
Example
Suppose you want to update a property of the user and you already have a user interface with all the properties required, but you don't want to create a separate interface for updating the user information. Using the Partial utility, you can dynamically create a type with all the properties as optional.
// User interface with all required properties
interface User{
id:string;
name: string;
slug: string;
group: string[];
avatarUrl: string;
about: string;
}
// Partial<User> generates a new type based on User with all the property
// keys being optional
const updateUser: Partial<User> = {
about: 'I am a software engineer.'
}
Required
The Required utility type is exactly the opposite of the Partial utility type and is very useful when you want to use an existing type but want all the properties to be required.
Example
In some cases, you may want to enforce that an object has all the required properties, even if the original type defines some of them as optional.
// User type has lastName property as optional
type User = {
firstName: string,
lastName?: string
}
// You want to create a user with both firstName and lastName, so you can use User type with Required utility type to make all the properties as required.
const user1: Required<User> = {
firstName: "John",
lastName: "Doe"
}
Omit
Omit utility type can be used to create an object type by omitting specific properties from another object type.
Example
Let's say you have an object type user with some properties X, Y and Z. If you want to create an object type without property Z, then you can use this utility type.
type Product = {
X: string;
Y: string;
Z: string;
}
type ProductWithoutZ = Omit<Product, "Z">;
Pick
With the Pick utility type, you can pick properties from an existing type to create a new type.
When you have a child component that has some properties in common with the parent component, you can create a type for the child by picking those properties.
Example
type ParentType = {
X: string;
T: number;
S: boolean;
}
type ChildType = Pick<ParentType, "X" | "S">
Exclude
When working with union type it's a common scenario that you want to use union type with only certain members not all, there you can use Exclude utility to achieve the same.
Example
type ReactionUnion = '👍' | '👎' | '😄' | '🎉' | '😕' | '❤️' | '👀' | '🚀'
// This is equivivalent to '👍' | '👎'
type OnlyThumbsUnion = Exclude<ReactionUnion , '😄' | '🎉' | '😕' | '❤️' | '👀' | '🚀'>
Summary
In this article, we discussed 6 TypeScript utility types that will help you write better typescript code.
More utility types are provided by TypeScript, you can check them out
here.
And that’s it for this topic. Thank you for reading.
Connect with me
This content originally appeared on DEV Community and was authored by Sachin Chaurasiya
Sachin Chaurasiya | Sciencx (2022-06-20T04:24:38+00:00) TypeScript Utility Types: The 6 Most Useful. Retrieved from https://www.scien.cx/2022/06/20/typescript-utility-types-the-6-most-useful/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.