First of Array

Get the first element's type from any array with this foundational challenge! 🥇

In this easy-level challenge, you'll implement a generic First<T> that extracts the type of the first element from an array. This seemingly simple task introduces important concepts like indexed access types, conditional types for handling empty arrays, and working with array types in TypeScript.

Understanding how to access and manipulate array element types is crucial for building more complex type utilities. You'll also learn how to handle edge cases like empty arrays gracefully.

type arr1 = ['a', 'b', 'c']
type arr2 = [3, 2, 1]
 
type head1 = First<arr1> // expected to be 'a'
type head2 = First<arr2> // expected to be 3

Detailed Explanation

There are multiple ways to solve this challenge, each teaching different TypeScript concepts.

Solution using infer:

type First<T extends any[]> = T extends readonly [infer First, ...infer _Rest]
  ? First
  : never

Key concepts:

• infer First captures the first element's type
• infer _Rest captures the rest of the array elements' types
• T extends readonly [infer First, ...infer _Rest] pattern matches the array type
• ? First returns the first element's type if the array is not empty
• : never returns never if the array is empty

Alternative solution using indexed access:

type First<T extends any[]> = T extends readonly [...any[]] ? T[0] : never

Key concepts:

• T[0] accesses the type at index 0
• Conditional types handle empty arrays by returning never
• infer F captures the first element's type
• Pattern matching with [infer F, ...any[]] destructures the array type

Both approaches effectively extract the first element's type while handling empty arrays appropriately.