Search for a command to run...
Write better typescript code by using typescript utility types.
Most welcome Shubham Sigdar 100Devs
Every October, the developer community buzzes with Hacktoberfest energy. PRs fly, t-shirts are earned, and GitHub turns green. But here's what nobody talks about: what happens in November? For most contributors, the answer is simple: nothing. The rep...
The debate over AI coding agents is missing the most important factor. It’s not about prompt engineering, it’s about understanding the context window. Developers are divided. One side claims coding agents suck. The other insists you’re just using the...
Learnings from a Research Paper
Lately, I have been working on a feature to capture images from media streams and scale them down to reduce their size. This helps save storage and reduce costs before uploading the images to a storage service. For this, I used Canvas to render the i...
AI helps you do more, but only if you know the basics well enough to tell it what you want.
I have been working with typescript for almost a year now, and I have learned and implemented a lot during 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.