Recently, I got a situation where I needed to access the first item in a TypeScript array. TypeScript provides several ways to accomplish this. In this tutorial, I will explain how to get the first element of an array in TypeScript using different methods with examples.
Let me show you each method with examples.
1. Using Array Index Notation
The simplest way to access the first element of an array in TypeScript is by using the array index notation. In TypeScript, arrays are zero-indexed, meaning the first element is at index 0. You can access the first element by using yourArray[0]
.
However, it’s important to check if the element at index 0 exists to avoid potential errors. The simplest way to access the first element is by yourArray[0] but this requires you to check if [0] actually exists.
Here’s an example:
const employees: string[] = ['John', 'Emily', 'Michael', 'Jessica'];
if (employees.length > 0) {
const firstEmployee: string = employees[0];
console.log(`The first employee is ${firstEmployee}.`);
} else {
console.log('The employees array is empty.');
}
In this example, we have an array called employees
that contains the names of employees in a US-based company. We check if the employees
array has at least one element by verifying its length.
If it does, we access the first element using employees[0]
and store it in the firstEmployee
variable. Finally, we log a message displaying the first employee’s name.
I executed the above TypeScript code using VS code, and you can see the exact output in the screenshot below:

Check out Check if an Array is Null or Empty in TypeScript
2. Using the at() Method
TypeScript, being a superset of JavaScript, benefits from the latest JavaScript features. One such feature is the at()
method, introduced in ECMAScript 2022. The at()
method allows you to access elements of an array using positive or negative integers.
To get the first element of an array using the at()
method, you can pass the index 0 as an argument. To get the first and last elements of an array using the at() method, pass the desired indices to the method.
Here’s an example:
const states: string[] = ['California', 'New York', 'Texas', 'Florida'];
const firstState: string | undefined = states.at(0);
if (firstState) {
console.log(`The first state is ${firstState}.`);
} else {
console.log('The states array is empty.');
}
In this example, we have an array called states
that contains the names of US states. We use the at()
method with index 0 to retrieve the first element of the states
array.
The at()
method returns the element if it exists, or undefined
if the index is out of bounds. We then check if firstState
is truthy (not undefined
) and log a message accordingly.
Here is the exact output in the screenshot below:

Check out How to Check if an Array is Empty in TypeScript?
3. Using Array Destructuring
Array destructuring is a convenient way to extract elements from an array in TypeScript. You can use array destructuring to assign the first element of an array to a variable.
Sometimes, you want to get a specific element of an array or string. For example, if you want to get the first element of an array, how do you do that?
Here’s an example:
const cities: string[] = ['New York City', 'Los Angeles', 'Chicago', 'Houston'];
const [firstCity, ...restCities] = cities;
console.log(`The first city is ${firstCity}.`);
console.log(`The remaining cities are: ${restCities.join(', ')}.`);
In this example, we have an array called cities
that contains the names of major cities in the US. We use array destructuring to assign the first element of the cities
array to the firstCity
variable.
The rest of the elements are collected into a new array called restCities
using the rest operator (...
). We then log the first city and the remaining cities separately.
Read Create and Use an Empty String Array in TypeScript
4. Using the find() Method
If you have an array of objects and want to retrieve the first element that satisfies a specific condition, you can use the find()
method.
The find()
method returns the first element in the array that satisfies the provided testing function. If no element satisfies the condition, undefined
is returned.
The find() method of Array instances returns the first element in the provided array that satisfies the provided testing function.
Here’s an example:
interface User {
id: number;
name: string;
email: string;
}
const users: User[] = [
{ id: 1, name: 'Alice', email: 'alice@example.com' },
{ id: 2, name: 'Bob', email: 'bob@example.com' },
{ id: 3, name: 'Charlie', email: 'charlie@example.com' },
];
const adminUser: User | undefined = users.find(user => user.email === 'admin@example.com');
if (adminUser) {
console.log(`The admin user is ${adminUser.name}.`);
} else {
console.log('No admin user found.');
}
In this example, we have an array of User
objects called users
. Each user has an id
, name
, and email
property. We use the find()
method to search for the first user object whose email
property matches 'admin@example.com'
.
If a matching user is found, we log their name. Otherwise, we log a message indicating that no admin user was found.
Check out Iterate Over Arrays in TypeScript
Type Safety with First
When working with arrays in TypeScript, you can create a generic type called First<T>
that takes an array type T
and returns the type of its first element. This ensures type safety when accessing the first element of an array. Implement a generic First that takes an Array T and returns it’s first element’s type.
Here’s an example:
type First<T extends any[]> = T extends [infer U, ...any[]] ? U : never;
const numbers: number[] = [1, 2, 3, 4, 5];
const firstNumber: First<typeof numbers> = numbers[0];
console.log(`The first number is ${firstNumber}.`);
const empty: string[] = [];
const firstEmpty: First<typeof empty> = empty[0]; // Type 'undefined' is not assignable to type 'never'.
In this example, we define a generic type First<T>
that takes an array type T
and uses conditional types and type inference to extract the type of its first element. If the array is not empty, it infers the type of the first element (U
).
Otherwise, it returns the never
type, indicating that the array is empty and accessing its first element is not possible.
We then demonstrate the usage of First<T>
with a numbers
array. The type of firstNumber
is inferred as number
, ensuring type safety. If we try to access the first element of an empty array (empty
), TypeScript raises a type error, preventing potential runtime errors.
Conclusion
In this tutorial, I explained various ways to get the first element of an array in TypeScript. We discussed using array index notation, the at()
method, array destructuring, the find()
method, and creating a type-safe First<T>
generic type. Do let me know if you have any questions.
You may also like:
- Check if a TypeScript Array Contains a Specific Value
- Get the Last Element of an Array in TypeScript
I’m Bijay Kumar Sahoo, and I am honored to be awarded the Microsoft MVP. With over 18 years of experience in the IT industry, I got a chance to work on SharePoint Framework (SPFx) development, TypeScript, React, JavaScript, etc. My journey has taken me through esteemed organizations such as TCS, HP, and KPIT, where I have honed my skills and expanded my expertise. Check out more about me here.