TypeScript Extract<Type, Union> Utility Type

In this article, we are going to learn about Extract<Type, Union> utility type in TypeScript, TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tools at any scale. Extract<Type, Union> utility type is used to extract a subset of types from a union type that matches a certain criterion, This type allows developers to work with subsets of a union type, which can make code more flexible and easier to maintain.

Syntax:

type Extract<Type, Union> = Type extends Union ? Type : never;

• Type: the type to extract from the union.
• Union: the union type to extract from.

Approach: We can see that how we can use the Extract<Type, Union> through this step-by-step approach for easy understanding.

Step 1: First of all we will need to define the original type that you want to extract a subset of types from.

type NumberTypes = string | number | boolean;

Step 2: Now we will need to define the new type that you want to create using the Extract utility type, in this case, the new type is Numeric, and the origin type is NumberTypes.

type Numeric = Extract<NumberTypes, number>;

Step 3: And now we use the new type in your code.

type NumberTypes = string | number | boolean;

type Numeric = Extract<NumberTypes, number>;

const num: Numeric = 42;

console.log(num); // Output: 42

Example 1: In this example, we are going to extract a subset of types called mammal from a union called Animal as we can see in the code below. Suppose we have a union type that represents different kinds of animals, like cat, dog, bird, fish and now we will use Extract to create a new type that contains only the types that represent mammals.

// Define the Animal union type.
type Animal = 'cat' | 'dog' | 'bird' | 'fish';

/* Define the Mammal type as the subset 
of Animal that includes 'cat' and 'dog' */
type Mammal = Extract<Animal, 'cat' | 'dog'>;

let myPet: Mammal;

/*Create an array of Mammal containing 
only 'cat' and 'dog' */
const mammals: Mammal[] = ['cat', 'dog'];

/* Use a for...of loop to iterate over each 
mammal value in the array */
for (const mammal of mammals) {
    
    //Print each mammal value to the console. 
    console.log(mammal);
}

Output: 

Example 2: In this example, we are going to create a type called User that represents a user in our system. We will create a type called AdminUser by using the Extract utility type to extract only the types from User where isAdmin property is true, We will then create a variable called admin of type AdminUser and assign it an object with properties that match the AdminUser type. Now note that it is a valid assignment because admin has all the properties that are required by the AdminUser type, as we can see in the code below.

/* Define the User type with a name 
property that is a string, and an 
optional isAdmin property that is 
a boolean */
type User = {
    name: string;
    isAdmin?: boolean;
}

/* Define the AdminUser type with a 
name property that is a string, and a 
required isAdmin property that is a 
boolean with a value of true */
type AdminUser = {
    name: string;
    isAdmin: true;
}

/* Create a new admin user object that 
matches the AdminUser type */
const adminUser: AdminUser = {
    name: "John",
    isAdmin: true,
}

// Log the admin user object to the console
console.log(adminUser);

Output:

Conclusion: In conclusion, we have covered the importance of Extract<Type, Union> like what is Extract, its syntax, how can we use it, and where should we use it. It is a useful utility type in TypeScript that allows developers to extract a subset of types from a union type that meets a specific criterion. This can improve the flexibility and maintainability of code by working with smaller subsets of types within a union type. By using this utility type, developers can write more concise and powerful code, while taking advantage of TypeScript's strong typing capabilities. Overall, Extract<Type, Union> is a valuable tool in a TypeScript developer's toolbox.