Extract type in Typescript - Mini Project: Build & Apply

Extract Type with TypeScript

📖 Scenario: You are working on a TypeScript project where you have a union type representing different user roles. You want to create a new type that extracts only the admin roles from this union.

🎯 Goal: Build a TypeScript program that uses the Extract utility type to create a new type containing only the admin roles from a union type.

📋 What You'll Learn

Create a union type called UserRoles with the exact values: 'admin', 'user', 'guest', 'superadmin'

Create a type called AdminRoles that extracts only 'admin' and 'superadmin' from UserRoles using the Extract utility type

Create a variable called adminRole of type AdminRoles and assign it the value 'admin'

Print the value of adminRole to the console

💡 Why This Matters

🌍 Real World

Extracting specific types from unions helps keep your code safe and clear when working with different categories or roles in applications.

💼 Career

Understanding TypeScript utility types like <code>Extract</code> is important for writing maintainable and type-safe code in professional frontend and backend development.

1

Create the union type UserRoles

Create a union type called UserRoles with these exact string values: 'admin', 'user', 'guest', and 'superadmin'.

Typescript

// Your code here

Hint

Use the | symbol to combine string literals into a union type.

2

Create the extracted type AdminRoles

Create a type called AdminRoles that uses the Extract utility type to extract only 'admin' and 'superadmin' from the UserRoles union type.

Typescript

type UserRoles = 'admin' | 'user' | 'guest' | 'superadmin';
// Your code here

Hint

Use Extract<UnionType, Subset> to get only the subset of types you want.

3

Create a variable of type AdminRoles

Create a variable called adminRole of type AdminRoles and assign it the value 'admin'.

Typescript

type UserRoles = 'admin' | 'user' | 'guest' | 'superadmin';
type AdminRoles = Extract;
// Your code here

Hint

Declare the variable with const and specify its type after the colon.

4

Print the adminRole variable

Write a console.log statement to print the value of the variable adminRole.

Typescript

type UserRoles = 'admin' | 'user' | 'guest' | 'superadmin';
type AdminRoles = Extract;
const adminRole: AdminRoles = 'admin';
// Your code here

Hint

Use console.log(adminRole); to print the value.

Practice

1. What does the TypeScript Extract<T, U> utility type do?

easy

A. It combines types T and U into a union type.

B. It removes types from T that are assignable to U.

C. It creates a new type by picking types from T that are assignable to U.

D. It converts a type T into a string literal type.

Solution

1. Step 1: Understand the purpose of Extract

   Extract<T, U> picks from T only those types that can be assigned to U.

2. Step 2: Compare with other utility types

   Unlike Exclude<T, U> which removes types, Extract keeps matching types.

3. Final Answer:

   It creates a new type by picking types from T that are assignable to U. -> Option C

4. Quick Check:

   Extract = picks matching types [OK]

Hint: Extract keeps only types from T assignable to U [OK]

Common Mistakes:

• Confusing Extract with Exclude
• Thinking Extract combines types
• Assuming Extract converts types to strings

2. Which of the following is the correct syntax to extract only string types from a union type U = string | number | boolean?

easy

A. type OnlyString = Extract;

B. type OnlyString = Extract;

C. type OnlyString = Extract;

D. type OnlyString = Extract;

Solution

1. Step 1: Identify the correct order of parameters

   Extract<T, U> takes the big union T first, then the type to pick U.

2. Step 2: Match the desired extracted type

   We want to pick string from U = string | number | boolean, so Extract<U, string> is correct.

3. Final Answer:

   type OnlyString = Extract<U, string>; -> Option A

4. Quick Check:

   Extract<Union, PickType> syntax [OK]

Hint: First param is full union, second is type to pick [OK]

Common Mistakes:

• Swapping the order of parameters
• Picking wrong type in second parameter
• Using Extract with unrelated types

3. Given the code:

type Mixed = string | number | boolean;
type Result = Extract;

What is the type of Result?

medium

A. string

B. never

C. string | number | boolean

D. number | boolean

Solution

1. Step 1: Understand the union types involved

   Mixed is string | number | boolean. We want to extract types assignable to number | boolean.

2. Step 2: Extract matching types

   From Mixed, only number and boolean match number | boolean. string is excluded.

3. Final Answer:

   number | boolean -> Option D

4. Quick Check:

   Extract picks matching types [OK]

Hint: Extract keeps only types assignable to second param [OK]

Common Mistakes:

• Including types not in second parameter
• Confusing Extract with union
• Thinking Extract returns never if partial match

4. Identify the error in this code snippet:

type A = string | number;
type B = Extract;

What will be the type of B?

medium

A. boolean

B. never

C. string | number

D. Error: incompatible types

Solution

1. Step 1: Analyze the Extract parameters

   A is string | number, and we try to extract boolean types.

2. Step 2: Determine matching types

   Since boolean is not assignable to string or number, no types match, so the result is never.

3. Final Answer:

   never -> Option B

4. Quick Check:

   No matching types means never [OK]

Hint: No matches in Extract means type is never [OK]

Common Mistakes:

• Expecting an error instead of never
• Assuming Extract returns original union
• Confusing Extract with Exclude

5. You have a union type type Data = string | number | null | undefined. You want to create a type that excludes null and undefined but only keeps string and number. Which Extract usage achieves this?

hard

A. type CleanData = Extract;

B. type CleanData = Extract;

C. type CleanData = Extract;

D. type CleanData = Extract;

Solution

1. Step 1: Identify the types to keep

   We want to keep only string and number, excluding null and undefined.

2. Step 2: Use Extract with correct second parameter

   Using Extract<Data, string | number> picks only string and number from Data.

3. Final Answer:

   type CleanData = Extract<Data, string | number>; -> Option A

4. Quick Check:

   Extract filters union by matching types [OK]

Hint: Extract with desired types filters out unwanted ones [OK]

Common Mistakes:

• Including null or undefined in second param
• Using Exclude instead of Extract
• Confusing Extract with union