Inferring types with infer keyword in Typescript - Mini Project: Build & Apply

Inferring types with infer keyword

📖 Scenario: You are working on a TypeScript project where you want to extract the type of elements inside an array type automatically. This helps you avoid repeating types and makes your code cleaner.

🎯 Goal: Build a TypeScript utility type called ElementType that uses the infer keyword to extract the type of elements inside an array type.

📋 What You'll Learn

Create a generic type called ElementType that takes one type parameter T.

Use a conditional type with infer to extract the element type from an array type.

Test the ElementType type with an example array type.

Print the inferred element type using a type alias and a variable.

💡 Why This Matters

🌍 Real World

In real projects, you often work with complex types like arrays or functions. Using <code>infer</code> helps you automatically get inner types without repeating them.

💼 Career

Understanding <code>infer</code> is important for advanced TypeScript programming, useful in building libraries, frameworks, or large applications with strong type safety.

1

Create an example array type

Create a type alias called MyArray that is an array of number.

Typescript

// Your code here

Need a hint?

Use type MyArray = number[]; to define an array of numbers.

2

Create the ElementType generic type with infer

Create a generic type alias called ElementType with one type parameter T. Use a conditional type with T extends (infer U)[] to infer the element type U. Return U if T is an array type, otherwise return never.

Typescript

type MyArray = number[];
// Your code here

Need a hint?

Use infer U inside the conditional type to extract the element type.

3

Test the ElementType type with MyArray

Create a type alias called Test that uses ElementType with MyArray as the type argument.

Typescript

type MyArray = number[];
type ElementType = T extends (infer U)[] ? U : never;
// Your code here

Need a hint?

Use type Test = ElementType; to test the inferred type.

4

Print the inferred type using a variable

Create a constant variable called value with type Test and assign it the number 42. Then, print value using console.log.

Typescript

type MyArray = number[];
type ElementType = T extends (infer U)[] ? U : never;
type Test = ElementType;
// Your code here

Need a hint?

Use const value: Test = 42; and console.log(value); to show the inferred type works.