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

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

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

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

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

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

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

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!

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

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

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;

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 = 'alice@example.com';

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

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};

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