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.

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:

Enjoyed the read? Hit 👏 like it’s a high-five — to motivate me to bring more stories!