7 Highly Effective TypeScript Utility Types
keyof, ReturnType, Awaited, Pretty, Partial, Required and Omit operators with examples
For modern web development, Typescript de facto has become the default technology to use.
![](https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*-Nhjwu__LX321JgST5Nmgw.png)
TypeScript already comes with ways to describe your code. But utility types are like superpowers!
They make your code even clearer, cleaner, and less likely to have hidden mistakes.
1. keyof
The keyof
operator is used to get the keys of an object. For example, if you have an object with properties name
and age
, you can use keyof object
to get the type of the keys, which is string | number
.
const person = {
name: "John",
age: 24,
};
const personKeys = keyof person; // personKeys will be "name" | "age"
console.log(personKeys); // Output: name | age
2. ReturnType
The ReturnType
type is used to get the return type of a function. For example, if you have a function that returns a string, you can use ReturnType<function>
to get the type of the return value, which is string
.
function getString(): string {
return "Hello";
}
const returnType = ReturnType<getString>;
// returnType will be "string"
console.log(returnType); // Output: string
3. Awaited
The Awaitied
type is used to get the type of the result of an awaited promise. For example, if you have an asynchronous function that returns a promise of a string, you can use Awaitied<Promise<string>>
to get the type of the awaited result, which is string
.
async function getStringAsync(): Promise<string> {
return "Hello";
}
const awaitedReturnType = Awaitied<Promise<string>>;
// awaitedReturnType will be "string"
console.log(awaitedReturnType); // Output: string
4. Pretty
The Pretty
type is a custom type created by Matt Poco that is used to get all the properties of a nested type, no matter how nested it is. For example, if you have a nested type with multiple levels of nesting, you can use Pretty<nestedType>
to get a type that includes all the properties of the nested type.
type MainType = {
name: string;
age: number;
};
type NestedType = MainType & {
isDeveloper: boolean;
};
const prettyNestedType = Pretty<NestedType>;
// prettyNestedType will include all the properties of MainType and NestedType
5. Partial
The Partial
type is used to make all the properties of an object optional. For example, if you have an interface with multiple properties, you can use Partial<interface>
to create a type where all the properties are optional.
interface Todo {
title: string;
description: string;
}
const partialTodo: Partial<Todo> = {};
// partialTodo can have any or none of the properties of Todo
6. Required
The Required
type is the opposite of Partial
. It is used to make all the properties of an object required. For example, if you have an interface with multiple properties, you can use Required<interface>
to create a type where all the properties are required.
interface Todo {
title: string;
description: string;
}
const requiredTodo: Required<Todo> = { title: "Hello" };
// requiredTodo must have all the properties of Todo
7. Omit
The Omit
type is used to remove certain properties from an object type. For example, if you have an interface with multiple properties, you can use Omit<interface, "property1", "property2">
to create a type that does not include the specified properties.
interface Todo {
title: string;
description: string;
createdAt: Date;
}
const todoWithoutCreatedAt: Omit<Todo, "createdAt"> = { title: "Hello", description: "World" };
// todoWithoutCreatedAt does not have the createdAt property
More about Omit operator in this article:
![](https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*45GaF1qST1JqqgMokiGS5Q.png)
Enjoyed the read? Hit 👏 like it’s a high-five — to motivate me to bring more stories!