How TypeScript infers generic types - Try It Yourself

How TypeScript infers generic types

📖 Scenario: You are building a small utility to work with arrays of different types. You want to create a function that can accept any type of array and return the first element. TypeScript can help by figuring out the type automatically using generics.

🎯 Goal: Build a generic function in TypeScript that returns the first element of any array, letting TypeScript infer the type automatically.

📋 What You'll Learn

Create a generic function called getFirstElement that accepts an array of any type.

Use TypeScript's generic type inference to let the function know the type of the array elements.

Call the function with different types of arrays: numbers and strings.

Print the returned first element from each call.

💡 Why This Matters

🌍 Real World

Generic functions are used in many libraries and applications to write reusable code that works with different data types safely.

💼 Career

Understanding how TypeScript infers generic types is important for writing clean, maintainable, and type-safe code in professional TypeScript projects.

1

Create an array of numbers

Create a variable called numbers and assign it the array [10, 20, 30].

Typescript

// Create a variable called numbers and assign it the array [10, 20, 30]
// Your code here

Need a hint?

Use const numbers = [10, 20, 30]; to create the array.

2

Create a generic function to get the first element

Create a generic function called getFirstElement with a type parameter T. It should accept a parameter arr of type T[] and return a value of type T.

Typescript

const numbers = [10, 20, 30];
// Create a generic function getFirstElement that takes arr: T[] and returns T
// Your code here

Need a hint?

Use function getFirstElement(arr: T[]): T { return arr[0]; }.

3

Call the generic function with number and string arrays

Call getFirstElement with the numbers array and assign the result to firstNumber. Then create a variable words with the array ["apple", "banana", "cherry"] and call getFirstElement with words, assigning the result to firstWord.

Typescript

const numbers = [10, 20, 30];

function getFirstElement(arr: T[]): T {
    return arr[0];
}

// Call getFirstElement with numbers and assign to firstNumber
// Create words array and call getFirstElement with it, assign to firstWord
// Your code here

Need a hint?

Call the function like getFirstElement(numbers) and getFirstElement(words).

4

Print the results

Print firstNumber and firstWord using console.log.

Typescript

const numbers = [10, 20, 30];

function getFirstElement(arr: T[]): T {
    return arr[0];
}

const firstNumber = getFirstElement(numbers);
const words = ["apple", "banana", "cherry"];
const firstWord = getFirstElement(words);

// Print firstNumber and firstWord
// Your code here

Need a hint?

Use console.log(firstNumber); console.log(firstWord); to print the values.