last modified February 24, 2025
Arrays in TypeScript are used to store multiple values in a single variable. They are similar to arrays in JaScript but with the added benefit of type safety. This article covers the creation, manipulation, and common operations on TypeScript arrays with practical examples.
What Are TypeScript Arrays?TypeScript arrays are ordered collections of elements that can be of any type. They can be declared using the Array syntax or the shorthand T[], where T is the type of elements in the array.
Creating ArraysThis example demonstrates how to create arrays in TypeScript.
creating_arrays.ts let numbers: number[] = [1, 2, 3, 4, 5]; let fruits: Array = ["Apple", "Banana", "Cherry"]; console.log(numbers); // Output: [1, 2, 3, 4, 5] console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]The numbers array is declared using the shorthand syntax, while the fruits array is declared using the Array syntax. Both arrays are type-safe, ensuring that only elements of the specified type can be added.
Accessing Array ElementsThis example demonstrates how to access elements in a TypeScript array.
accessing_elements.ts let numbers: number[] = [1, 2, 3, 4, 5]; console.log(numbers[0]); // Output: 1 console.log(numbers[2]); // Output: 3Array elements are accessed using their index. The first element is at index 0, the second at index 1, and so on.
Modifying Array ElementsThis example demonstrates how to modify elements in a TypeScript array.
modifying_elements.ts let numbers: number[] = [1, 2, 3, 4, 5]; numbers[1] = 10; // Modify the second element console.log(numbers); // Output: [1, 10, 3, 4, 5]Array elements can be modified by assigning a new value to a specific index.
Array MethodsThis example demonstrates common array methods in TypeScript.
array_methods.ts let numbers: number[] = [1, 2, 3, 4, 5]; numbers.push(6); // Add an element to the end console.log(numbers); // Output: [1, 2, 3, 4, 5, 6] numbers.pop(); // Remove the last element console.log(numbers); // Output: [1, 2, 3, 4, 5] numbers.shift(); // Remove the first element console.log(numbers); // Output: [2, 3, 4, 5] numbers.unshift(1); // Add an element to the beginning console.log(numbers); // Output: [1, 2, 3, 4, 5]TypeScript arrays support common methods like push, pop, shift, and unshift for adding and removing elements.
Iterating Over ArraysThis example demonstrates how to iterate over a TypeScript array.
iterating_arrays.ts let fruits: string[] = ["Apple", "Banana", "Cherry"]; for (let fruit of fruits) { console.log(fruit); } // Output: // Apple // Banana // CherryThe for...of loop is used to iterate over the elements of an array. This is a clean and concise way to access each element.
Multidimensional ArraysThis example demonstrates how to create and use multidimensional arrays in TypeScript.
multidimensional_arrays.ts let matrix: number[][] = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]; for (let row of matrix) { for (let num of row) { console.log(num); } }Multidimensional arrays are arrays of arrays. They can be used to represent matrices or grids.
Best Practices for Using Arrays Use Type Annotations: Always specify the type of elements in an array to ensure type safety. Prefer Immutable Operations: Use methods like map, filter, and reduce to oid mutating the original array. Leverage Array Methods: Use built-in array methods for common operations like adding, removing, and iterating over elements. Handle Edge Cases: Always check for edge cases like empty arrays or out-of-bounds access. SourceTypeScript Arrays Documentation
In this article, we he explored TypeScript arrays and demonstrated their usage through practical examples.
AuthorMy name is Jan Bodnar, and I am a passionate programmer with extensive programming experience. I he been writing programming articles since 2007. To date, I he authored over 1,400 articles and 8 e-books. I possess more than ten years of experience in teaching programming.
List all TypeScript tutorials.