Introduction
In this chapter, we will explore arrays in TypeScript. Arrays are used to store multiple values in a single variable. Understanding how to work with arrays is essential for managing and manipulating collections of data in your TypeScript programs.
Table of Contents
- Definition
- Array Syntax
- Creating and Accessing Array Elements
- Common Array Methods
- Iterating Through Arrays
- Cloning Arrays
- Merging Arrays
- Multidimensional Arrays
- Type Inference with Arrays
- Complete Example with Output
- Conclusion
Definition
An array in TypeScript is a data structure that can hold multiple values of the same type. Arrays are indexed, meaning each element in the array has a numeric index starting from 0. Arrays can be used to store a list of values, making it easy to perform operations like sorting, searching, and iterating over the elements.
Array Syntax
Syntax
let arrayName: type[] = [value1, value2, ...];
Example
let numbers: number[] = [1, 2, 3, 4, 5];
console.log(numbers);
Output
[ 1, 2, 3, 4, 5 ]
Creating and Accessing Array Elements
You can create arrays with initial values and access elements using their index.
Example
let names: string[] = ["Ramesh", "Suresh", "Mahesh"];
// Accessing elements
console.log(names[0]); // Output: Ramesh
console.log(names[1]); // Output: Suresh
console.log(names[2]); // Output: Mahesh
// Modifying elements
names[1] = "Rajesh";
console.log(names); // Output: [ 'Ramesh', 'Rajesh', 'Mahesh' ]
Output
Ramesh
Suresh
Mahesh
[ 'Ramesh', 'Rajesh', 'Mahesh' ]
Common Array Methods
TypeScript provides various built-in methods for working with arrays, such as push, pop, shift, unshift, concat, slice, and splice.
Example
let fruits: string[] = ["Apple", "Banana", "Cherry"];
// push
fruits.push("Mango");
console.log(fruits); // Output: [ 'Apple', 'Banana', 'Cherry', 'Mango' ]
// pop
fruits.pop();
console.log(fruits); // Output: [ 'Apple', 'Banana', 'Cherry' ]
// shift
fruits.shift();
console.log(fruits); // Output: [ 'Banana', 'Cherry' ]
// unshift
fruits.unshift("Orange");
console.log(fruits); // Output: [ 'Orange', 'Banana', 'Cherry' ]
// concat
let moreFruits: string[] = ["Grapes", "Pineapple"];
let allFruits = fruits.concat(moreFruits);
console.log(allFruits); // Output: [ 'Orange', 'Banana', 'Cherry', 'Grapes', 'Pineapple' ]
// slice
let slicedFruits = allFruits.slice(1, 3);
console.log(slicedFruits); // Output: [ 'Banana', 'Cherry' ]
// splice
allFruits.splice(2, 1, "Peach", "Strawberry");
console.log(allFruits); // Output: [ 'Orange', 'Banana', 'Peach', 'Strawberry', 'Grapes', 'Pineapple' ]
Output
[ 'Apple', 'Banana', 'Cherry', 'Mango' ]
[ 'Apple', 'Banana', 'Cherry' ]
[ 'Banana', 'Cherry' ]
[ 'Orange', 'Banana', 'Cherry' ]
[ 'Orange', 'Banana', 'Cherry', 'Grapes', 'Pineapple' ]
[ 'Banana', 'Cherry' ]
[ 'Orange', 'Banana', 'Peach', 'Strawberry', 'Grapes', 'Pineapple' ]
Iterating Through Arrays
TypeScript provides several ways to iterate through arrays, including for loops, for...of loops, and the forEach method.
Example
let numbers: number[] = [1, 2, 3, 4, 5];
// Using a for loop
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
// Using a for...of loop
for (let num of numbers) {
console.log(num);
}
// Using the forEach method
numbers.forEach(num => console.log(num));
Output
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
Cloning Arrays
You can clone arrays using the slice method or the spread operator.
Example
let originalArray: number[] = [1, 2, 3];
// Cloning using the slice method
let clonedArray1 = originalArray.slice();
console.log(clonedArray1); // Output: [ 1, 2, 3 ]
// Cloning using the spread operator
let clonedArray2 = [...originalArray];
console.log(clonedArray2); // Output: [ 1, 2, 3 ]
Output
[ 1, 2, 3 ]
[ 1, 2, 3 ]
Merging Arrays
You can merge arrays using the concat method or the spread operator.
Example
let array1: number[] = [1, 2, 3];
let array2: number[] = [4, 5, 6];
// Merging using the concat method
let mergedArray1 = array1.concat(array2);
console.log(mergedArray1); // Output: [ 1, 2, 3, 4, 5, 6 ]
// Merging using the spread operator
let mergedArray2 = [...array1, ...array2];
console.log(mergedArray2); // Output: [ 1, 2, 3, 4, 5, 6 ]
Output
[ 1, 2, 3, 4, 5, 6 ]
[ 1, 2, 3, 4, 5, 6 ]
Multidimensional Arrays
Multidimensional arrays are arrays of arrays. They are used to represent data in a grid-like structure.
Example
let matrix: number[][] = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
// Accessing elements
console.log(matrix[0][0]); // Output: 1
console.log(matrix[1][1]); // Output: 5
console.log(matrix[2][2]); // Output: 9
// Modifying elements
matrix[1][1] = 10;
console.log(matrix); // Output: [ [ 1, 2, 3 ], [ 4, 10, 6 ], [ 7, 8, 9 ] ]
Output
1
5
9
[ [ 1, 2, 3 ], [ 4, 10, 6 ], [ 7, 8, 9 ] ]
Type Inference with Arrays
TypeScript can infer the types of array elements based on their initial values.
Example
let cities = ["Mumbai", "Delhi", "Bangalore"];
// TypeScript infers the type of 'cities' as string[]
console.log(cities);
Output
[ 'Mumbai', 'Delhi', 'Bangalore' ]
Complete Example with Output
In this section, we will combine all the examples into a single TypeScript file and test it using TypeScript Playground:
// Creating and Accessing Array Elements
let names: string[] = ["Ramesh", "Suresh", "Mahesh"];
// Accessing elements
console.log(names[0]); // Output: Ramesh
console.log(names[1]); // Output: Suresh
console.log(names[2]); // Output: Mahesh
// Modifying elements
names[1] = "Rajesh";
console.log(names); // Output: [ 'Ramesh', 'Rajesh', 'Mahesh' ]
// Common Array Methods
let fruits: string[] = ["Apple", "Banana", "Cherry"];
// push
fruits.push("Mango");
console.log(fruits); // Output: [ 'Apple', 'Banana', 'Cherry', 'Mango' ]
// pop
fruits.pop();
console.log(fruits); // Output: [ 'Apple', 'Banana', 'Cherry' ]
// shift
fruits.shift();
console.log(fruits); // Output: [ 'Banana', 'Cherry' ]
// unshift
fruits.unshift("Orange");
console.log(fruits); // Output: [ 'Orange', 'Banana', 'Cherry' ]
// concat
let moreFruits: string[] = ["G
rapes", "Pineapple"];
let allFruits = fruits.concat(moreFruits);
console.log(allFruits); // Output: [ 'Orange', 'Banana', 'Cherry', 'Grapes', 'Pineapple' ]
// slice
let slicedFruits = allFruits.slice(1, 3);
console.log(slicedFruits); // Output: [ 'Banana', 'Cherry' ]
// splice
allFruits.splice(2, 1, "Peach", "Strawberry");
console.log(allFruits); // Output: [ 'Orange', 'Banana', 'Peach', 'Strawberry', 'Grapes', 'Pineapple' ]
// Iterating Through Arrays
let numbers: number[] = [1, 2, 3, 4, 5];
// Using a for loop
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
// Using a for...of loop
for (let num of numbers) {
console.log(num);
}
// Using the forEach method
numbers.forEach(num => console.log(num));
// Cloning Arrays
let originalArray: number[] = [1, 2, 3];
// Cloning using the slice method
let clonedArray1 = originalArray.slice();
console.log(clonedArray1); // Output: [ 1, 2, 3 ]
// Cloning using the spread operator
let clonedArray2 = [...originalArray];
console.log(clonedArray2); // Output: [ 1, 2, 3 ]
// Merging Arrays
let array1: number[] = [1, 2, 3];
let array2: number[] = [4, 5, 6];
// Merging using the concat method
let mergedArray1 = array1.concat(array2);
console.log(mergedArray1); // Output: [ 1, 2, 3, 4, 5, 6 ]
// Merging using the spread operator
let mergedArray2 = [...array1, ...array2];
console.log(mergedArray2); // Output: [ 1, 2, 3, 4, 5, 6 ]
// Multidimensional Arrays
let matrix: number[][] = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
// Accessing elements
console.log(matrix[0][0]); // Output: 1
console.log(matrix[1][1]); // Output: 5
console.log(matrix[2][2]); // Output: 9
// Modifying elements
matrix[1][1] = 10;
console.log(matrix); // Output: [ [ 1, 2, 3 ], [ 4, 10, 6 ], [ 7, 8, 9 ] ]
// Type Inference with Arrays
let cities = ["Mumbai", "Delhi", "Bangalore"];
// TypeScript infers the type of 'cities' as string[]
console.log(cities); // Output: [ 'Mumbai', 'Delhi', 'Bangalore' ]
Conclusion
In this chapter, we covered arrays in TypeScript, including how to create and access array elements, use common array methods, iterate through arrays, clone arrays, merge arrays, work with multidimensional arrays, and understand type inference with arrays. We provided a complete example with its output to illustrate how arrays work in TypeScript. Understanding arrays is essential for managing and manipulating collections of data in your TypeScript programs.
Comments
Post a Comment
Leave Comment