Bird
Raised Fist0
Typescriptprogramming~5 mins

Extract type in Typescript

Choose your learning style10 modes available
Introduction

The Extract type helps you pick only certain parts from a group of options. It makes your code cleaner by choosing just what you need.

When you want to select specific words from a list of strings.
When you need to filter types to only those that match a certain pattern.
When you want to reuse parts of a type but not all of it.
When you want to make sure a variable only holds certain allowed values.
Syntax
Typescript
Extract<Type, Union>

Type is the original set of types you want to filter.

Union is the set of types you want to keep from Type.

Examples
This picks only the vowels from the letters. Since only 'a' is in Letters, the result is 'a'.
Typescript
type Letters = 'a' | 'b' | 'c' | 'd';
type Vowels = Extract<Letters, 'a' | 'e' | 'i' | 'o' | 'u'>;  // 'a'
This extracts only even numbers from the Numbers type.
Typescript
type Numbers = 1 | 2 | 3 | 4 | 5;
type EvenNumbers = Extract<Numbers, 2 | 4 | 6 | 8>;
// Result: 2 | 4
This keeps only string and boolean types from the Mixed type.
Typescript
type Mixed = string | number | boolean;
type StringsOnly = Extract<Mixed, string | boolean>;
// Result: string | boolean
Sample Program

This program defines a type Pets with some animals. Then it extracts only common pets (cat and dog) from it. It shows how you can use Extract to limit allowed values.

Typescript
type Pets = 'dog' | 'cat' | 'parrot' | 'fish';
type CommonPets = Extract<Pets, 'cat' | 'dog' | 'hamster'>;

const myPet1: CommonPets = 'dog';
const myPet2: CommonPets = 'cat';
// const myPet3: CommonPets = 'parrot'; // Error: 'parrot' not in CommonPets

console.log(myPet1);
console.log(myPet2);
OutputSuccess
Important Notes

Extract only keeps types that exist in both sets.

If no types match, the result is never.

It is useful to narrow down union types safely.

Summary

Extract picks matching types from a bigger set.

Use it to filter union types easily.

It helps keep your code clear and safe.

Practice

(1/5)
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
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard