Generic Arrays

Part of the Introduction To TypeScript section of Coddy's JavaScript journey — lesson 60 of 73.

Arrays and generics work together beautifully in TypeScript. When you learned about typed arrays earlier, you used the T[] syntax to specify that an array can only contain elements of a specific type. Generics give you another way to express this same concept.

TypeScript provides an alternative syntax for typed arrays using the Array<T> format:

// These two declarations are equivalent:
let numbers1: number[] = [1, 2, 3];
let numbers2: Array<number> = [1, 2, 3];

The Array<T> syntax is particularly useful when working with generic functions that operate on arrays. It makes the generic nature of your code more explicit and readable, especially when you're creating functions that can work with arrays of any type while preserving type safety.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Challenge

Easy

Create a generic function named getFirstElement that takes an array of any type and returns the first element or undefined if the array is empty.

The function should:

Use a generic type parameter T
Accept one parameter named arr of type Array<T>
Return the first element of type T or undefined
Have an explicit return type annotation of T | undefined

Create the following arrays using the Array<T> syntax:

stringArray of type Array<string> containing ["apple", "banana", "cherry"]
numberArray of type Array<number> containing [10, 20, 30, 40]
booleanArray of type Array<boolean> containing [true, false, true]
emptyStringArray of type Array<string> that is empty

Test your function and print the following outputs:

Print the result of calling getFirstElement with stringArray
Print the result of calling getFirstElement with numberArray
Print the result of calling getFirstElement with booleanArray
Print the result of calling getFirstElement with emptyStringArray
Print the result of calling getFirstElement with a new Array<string> containing ["single"]

Cheat sheet

TypeScript provides two equivalent syntaxes for typed arrays:

// These two declarations are equivalent:
let numbers1: number[] = [1, 2, 3];
let numbers2: Array<number> = [1, 2, 3];

The Array<T> syntax is particularly useful when working with generic functions that operate on arrays, making the generic nature of your code more explicit and readable while preserving type safety.

Try it yourself

// TODO: Write your code here
// Create the generic function getFirstElement

// Create the required arrays using Array<T> syntax

// Test the function and print the results

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Generic Arrays

Cheat sheet

All lessons in Introduction To TypeScript