Leveraging TypeScript Utility Types

TypeScript offers numerous utility types that allow you to manipulate types dynamically and practically. Whether it's making properties optional, immutable, or filtering certain fields from a type, these utilities can help you write cleaner, safer, and more readable code.

In this article, you'll discover some of the most commonly used utility types in TypeScript, with concrete examples showing you how and when to use them.

1. Partial<T>

The Partial<T> utility type transforms all properties of type T into optional properties. This is particularly useful when working with objects where all properties aren't always necessary.

Example

Let's imagine a User type with required properties:

typescript
1type User = {
2  id: number;
3  name: string;
4  email: string;
5};

If you want to create a function that updates a user but only needs a subset of these properties, you can use Partial<User>:

typescript
1function updateUser(user: User, updates: Partial<User>) {
2  return { ...user, ...updates };
3}
4
5// Usage
6const user: User = { id: 1, name: 'Alice', email: '[email protected]' };
7const updatedUser = updateUser(user, { name: 'Alicia' });

Thanks to Partial<User>, you can now update only certain properties without having to provide all the others.

2. Readonly<T>

Readonly<T> makes all properties of type T immutable. This means once the object is created, you can't modify its properties, which is ideal for constant objects.

Example

typescript
1type Config = {
2  apiEndpoint: string;
3  timeout: number;
4};
5
6const config: Readonly<Config> = {
7  apiEndpoint: 'https://api.example.com',
8  timeout: 5000,
9};
10
11// Error: Cannot assign to 'timeout' because it is a read-only property
12config.timeout = 3000;

By using Readonly<Config>, you ensure that config remains immutable throughout execution.

3. Pick<T, K>

The Pick<T, K> utility type creates a new type by selecting only certain properties from type T. This is useful when you want to create a subset of an existing type.

Example

typescript
1type User = {
2  id: number;
3  name: string;
4  email: string;
5  address: string;
6};
7
8type UserSummary = Pick<User, 'id' | 'name'>;
9
10const userSummary: UserSummary = {
11  id: 1,
12  name: 'Alice',
13};
14
15// Error: Property 'email' does not exist on type 'UserSummary'
16userSummary.email = '[email protected]';

With Pick<User, "id" | "name">, you create a UserSummary type that contains only the id and name properties.

4. Omit<T, K>

Conversely, Omit<T, K> creates a new type by excluding certain properties from type T. It's the opposite of Pick.

Example

typescript
1type UserWithoutAddress = Omit<User, 'address'>;
2
3const userWithoutAddress: UserWithoutAddress = {
4  id: 1,
5  name: 'Alice',
6  email: '[email protected]',
7};
8
9// Error: Property 'address' does not exist on type 'UserWithoutAddress'
10userWithoutAddress.address = '123 Main St';

In this example, UserWithoutAddress contains all properties of User, except address.

5. Record<K, T>

Record<K, T> is used to create an object type where the keys K are of a specific type, and the values are of type T. This is useful for creating associative objects, like dictionaries or mappings.

Example

Let's say you want to create an object associating user roles with access rights:

typescript
1type Role = 'admin' | 'user' | 'guest';
2type Permissions = 'read' | 'write' | 'delete';
3
4const rolePermissions: Record<Role, Permissions[]> = {
5  admin: ['read', 'write', 'delete'],
6  user: ['read', 'write'],
7  guest: ['read'],
8};

In this example, Record<Role, Permissions[]> ensures that the rolePermissions object contains all keys admin, user, and guest, with values of type Permissions[].

6. Exclude<T, U>

Exclude<T, U> allows you to create a type by excluding certain types from another type. It's useful for filtering specific types from a Union Type.

Example

typescript
1type Status = 'active' | 'inactive' | 'suspended';
2
3type ActiveStatus = Exclude<Status, 'suspended'>;
4
5const status: ActiveStatus = 'active'; // Valid
6const anotherStatus: ActiveStatus = 'suspended'; // Error

By using Exclude<Status, "suspended">, you create an ActiveStatus type that can't be "suspended".

Conclusion

TypeScript's utility types allow you to express complex types in a concise and readable way. By leveraging Partial, Readonly, Pick, Omit, Record, and Exclude, you can manipulate your types dynamically and meet your application's needs without cluttering your code.

These utilities are just the tip of the iceberg: TypeScript offers many other advanced utility types. Take the time to explore these tools, and your code will be more maintainable, safer, and easier to read.

By applying these tips, you'll be able to manipulate your types more effectively and write even more robust TypeScript code. Happy coding!