Utility Types in Typescript

Arman Kolahan
3 min readDec 19, 2023

TypeScript comes with a collection of utility types that enable developers to perform common type manipulations with ease. These utility types can significantly enhance code readability and improve the overall structure of your TypeScript projects.

Utility Types in Typescript

Commonly Used Utility Types

Partial<T>: This utility type takes a type T and transforms it into a partial type, making all the properties optional. For instance, Partial<{ name: string; age: number }> will render { name?: string; age?: number }.

Partial<{ name: string; age: number }> = { name?: string; age?: number }

Required<T>: This utility type takes a type T and transforms it into a required type, making all the properties mandatory. For example, Required<{ name?: string; age?: number }> will render { name: string; age: number }.

Required<{ name?: string; age?: number }> = { name: string; age: number }

Omit<T, Keys>: This utility type takes a type T and removes the specified properties Keys from the original type. For instance, Omit<{ name: string; age: number; surname: string }, "surname"> will render { name: string; age: number }.

Omit<{ name: string; age: number; surname: string }, "surname"> = { name: string; age: number }

Pick<T, Keys>: This utility type takes a type T and only includes the specified properties Keys from the original type. For example, Pick<{ name: string; age: number; surname: string }, "name"> will render { name: string }.

Pick<{ name: string; age: number; surname: string }, "name"> = { name: string }

Readonly<T>: This utility type takes a type T and makes all its properties readonly, preventing any further modifications. For instance, Readonly<{ name: string; age: number }> will render { readonly name: string; readonly age: number }.

Readonly<{ name: string; age: number }> = { readonly name: string; readonly age: number }

Extract<T, K>: This utility type extracts a specific key K from a type T and returns it as a type. For instance, Extract<{ name: string; age: number }, "age"> will render number.

Extract<{ name: string; age: number }, "age"> = number

ReturnType<T>: This utility type retrieves the type of a function T's return value. For example, ReturnType<(value: number) => string> will render string.

ReturnType<(value: number) => string> = string

Parameters<T>: This utility type retrieves the type annotations of a function T's parameters. For example, Parameters<(s: string, n: number) => void> will render [string, number].

Parameters<(s: string, n: number) => void> = [string, number]

NonNullable<T>: This utility type takes a type T and makes it non-nullable, ensuring no null or undefined values can be assigned. For instance, NonNullable<string | null | undefined> will render string.

NonNullable<string | null | undefined> = string

Awaited<T>: This utility type takes a promise type T and ensures it returns a value of type T's resolved type. For example, Awaited<Promise<number>> will render number.

Awaited<Promise<number>> = number

Conclusion

Utility types in TypeScript offer a powerful and flexible approach to type manipulation, enhancing the overall development experience. By understanding and utilizing these utility types effectively, TypeScript developers can write more robust and type-safe code, contributing to the overall maintainability and clarity of their projects.

--

--

Arman Kolahan

Experienced frontend engineer & architect with over a decade of expertise in React. Proven leader and team builder. Passionate writer.