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.