Comprehensive Guide to Accessing the Last Element of TypeScript Arrays

Core Principles of Array End Element Access

In TypeScript, arrays are zero-indexed data structures, meaning the first element has index 0 and the last element has an index equal to the array length minus 1. This design originates from JavaScript's array implementation, which TypeScript fully inherits as its superset.

Standard Access Method: Based on Array Length

The most straightforward and widely supported approach utilizes the array's length property combined with index access:

const items: string[] = ["tom", "jeff", "sam"];
const lastItem = items[items.length - 1];
console.log(lastItem); // Output: "sam"

This method's advantages lie in its simplicity and cross-environment compatibility, working in all TypeScript-supported environments. Note that when the array is empty, items.length - 1 equals -1, resulting in undefined access, so empty array checks should be implemented in practical applications.

Modern Alternative: The at() Method

With the evolution of ECMAScript specifications, Array.prototype.at() provides more intuitive negative index support:

const arr: number[] = [1, 2, 3];
const lastElement = arr.at(-1);
console.log(lastElement); // Output: 3

This method has received full support since TypeScript 4.5.4, offering syntax closer to conventions in other programming languages (like Ruby). Compared to the standard method, at(-1) is semantically clearer but requires consideration of target environment compatibility.

Comparison of Other Practical Methods

slice() Method: Creates a new array containing the last element using negative indices

const lastArray = items.slice(-1);
const lastItem = lastArray[0];

This approach doesn't modify the original array but incurs additional array creation overhead.

pop() Method: Removes and returns the last element

const popped = items.pop();
// Note: Original array is modified

Since it alters the original array, it should generally be used only when element removal is actually needed. The return type is T | undefined, requiring handling of potential undefined values.

Method Selection Recommendations

When choosing a specific implementation, consider these factors: project compatibility requirements, performance sensitivity, and code readability. For most scenarios, the standard length-based method offers the best balance. When targeting environments supporting ES2022 features, the at() method deserves priority consideration.

Handling Edge Cases

All access methods require special handling for empty arrays:

function getLastElement<T>(array: T[]): T | undefined {
    if (array.length === 0) return undefined;
    return array[array.length - 1];
}

Encapsulating with generic functions ensures type safety and unified handling of edge cases.