Search for a command to run...
Write better typescript code by using typescript utility types.
Great article! I have one questions though. In different examples you've used interfaces and types. Does it matters and some utilities work just with types and others just with interfaces or it does not matter and every utility mentioned above works with both interfaces and types?
Thanks Karolina Hudziec, In most of them you can use both types and interfaces, but in some utility types you have to either use interfaces or types. you can read more on this here
Thanks Deepak Pundir
Authentication is a fundamental aspect of modern web and mobile applications. It ensures that users can securely access an app while protecting their data. Firebase, a platform developed by Google, offers a simple and efficient way to add authenticat...
Hello there! My name is Shivam, and today, I will show you how to create this beautiful horizontal scrolling parallax effect with HTML, CSS, and JavaScript. Wouldn't this look stunning on your blog or portfolio site? To achieve this effect, we will ...
Dealing with fonts can get quite overwhelming. For quite some time, I was searching for a way to self-host google fonts because the google fonts API's network request increased the render-blocking time more than I expected. I stumbled upon fontsource...
Our favorite month is here! And we have some amazing activities planned for our community 🤩 Yes, you are right. We are talking about Hacktoberfest! In this blog, we want to cover various ways you can participate in Hacktoberfest through the ReactPla...
The second edition of ReactPlay Hackathon is here!
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,
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.
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: string;
email: string;
avatarUrl: string;
}
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.
The Partial utility type is very useful when you want to use an existing type but want all the properties to be optional.
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.'
}
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.
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 utility type can be used to create an object type by omitting specific properties from another object type.
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">;
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.
type ParentType = {
X: string;
T: number;
S: boolean;
}
type ChildType = Pick<ParentType, "X" | "S">
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.
type ReactionUnion = '👍' | '👎' | '😄' | '🎉' | '😕' | '❤️' | '👀' | '🚀'
// This is equivivalent to '👍' | '👎'
type OnlyThumbsUnion = Exclude<ReactionUnion , '😄' | '🎉' | '😕' | '❤️' | '👀' | '🚀'>
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.