Utility Types in TypeScript

Learn about Utility Types in TypeScript with this detailed tutorial. Includes explanations and examples to help you master utility types.

Introduction

Utility types in TypeScript provide built-in generic types that facilitate common type transformations. They help simplify and enhance the flexibility of your type definitions. In this tutorial, we will cover some of the most commonly used utility types in TypeScript.

Partial

The Partial utility type makes all properties in a type optional.

interface Person {
    name: string;
    age: number;
}

let partialPerson: Partial = {};
partialPerson.name = "John"; // OK
partialPerson.age = 30; // OK

Explanation

In this example, the Partial utility type is used to create a version of the Person interface where all properties are optional.

Required

The Required utility type makes all properties in a type required.

interface Person {
    name?: string;
    age?: number;
}

let requiredPerson: Required = {
    name: "John",
    age: 30
}; // OK

Explanation

In this example, the Required utility type is used to create a version of the Person interface where all properties are required.

Readonly

The Readonly utility type makes all properties in a type read-only.

interface Person {
    name: string;
    age: number;
}

let readonlyPerson: Readonly = {
    name: "John",
    age: 30
};

// readonlyPerson.name = "Doe"; // Error: Cannot assign to 'name' because it is a read-only property.

Explanation

In this example, the Readonly utility type is used to create a version of the Person interface where all properties are read-only.

Pick

The Pick utility type allows you to create a new type by picking specific properties from an existing type.

interface Person {
    name: string;
    age: number;
    address: string;
}

type PersonName = Pick;

let personName: PersonName = {
    name: "John"
}; // OK

Explanation

In this example, the Pick utility type is used to create a new type that only includes the name property from the Person interface.

Omit

The Omit utility type allows you to create a new type by omitting specific properties from an existing type.

interface Person {
    name: string;
    age: number;
    address: string;
}

type PersonWithoutAddress = Omit;

let personWithoutAddress: PersonWithoutAddress = {
    name: "John",
    age: 30
}; // OK

Explanation

In this example, the Omit utility type is used to create a new type that omits the address property from the Person interface.

Record

The Record utility type creates a type with a set of properties K of type T.

type PageInfo = {
    title: string;
};

type Page = "home" | "about" | "contact";

const x: Record = {
    home: { title: "Home" },
    about: { title: "About" },
    contact: { title: "Contact" },
};

Explanation

In this example, the Record utility type is used to create a type with properties for each page, each containing a PageInfo object.

Exclude

The Exclude utility type constructs a type by excluding from union type T all union members that are assignable to U.

type T0 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"
type T1 = Exclude void), Function>; // string | number

Explanation

In this example, the Exclude utility type is used to exclude specific types from a union type.

Extract

The Extract utility type constructs a type by extracting from union type T all union members that are assignable to U.

type T0 = Extract<"a" | "b" | "c", "a" | "f">; // "a"
type T1 = Extract void), Function>; // () => void

Explanation

In this example, the Extract utility type is used to extract specific types from a union type.

NonNullable

The NonNullable utility type constructs a type by excluding null and undefined from type T.

type T0 = NonNullable; // string | number
type T1 = NonNullable; // string[]

Explanation

In this example, the NonNullable utility type is used to exclude null and undefined from a type.

ReturnType

The ReturnType utility type constructs a type consisting of the return type of function T.

function f() {
    return { x: 10, y: 3 };
}

type P = ReturnType; // { x: number; y: number; }

Explanation

In this example, the ReturnType utility type is used to obtain the return type of the f function.

InstanceType

The InstanceType utility type constructs a type consisting of the instance type of a constructor function type T.

class C {
    x = 0;
    y = 0;
}

type T0 = InstanceType; // C
type T1 = InstanceType; // any
type T2 = InstanceType; // never

Explanation

In this example, the InstanceType utility type is used to obtain the instance type of the C class.

Conclusion

Utility types in TypeScript provide powerful tools for transforming and manipulating types. By understanding and using these utility types, you can write more flexible, maintainable, and type-safe code.