Lesson 2

Are you ready for a TypeScript journey? In this lesson, we'll delve into **Simple Data Structures** and **Advanced Array Operations**. You'll master the creation, manipulation, and access of elements in both single and multi-dimensional arrays. Imagine managing a task list for a software development project where each array element could be a feature with its own array of sub-features – exciting, isn't it? Let's dive in!

Multi-dimensional arrays behave like clusters with each item being an array itself, akin to clusters of data units.

Creating a multi-dimensional array is straightforward: simply place an array inside another array, as shown here:

TypeScript`1let multiArray: any[][] = [[1, 2, 3], ['a', 'b', 'c'], [true, false]]; 2console.log(multiArray); // Output: [ [ 1, 2, 3 ], [ 'a', 'b', 'c' ], [ true, false ] ]`

In this case, we have a multi-dimensional array of three elements, each of which is also an array.

Accessing elements in a multi-dimensional array relies on indexes. The first index points to the outer array, while the second one points to the inner array:

TypeScript`1let multiArray: any[][] = [[1, 2, 3], ['a', 'b', 'c'], [true, false]]; 2 3// Accessing the first array 4console.log(multiArray[0]); // Output: [ 1, 2, 3 ] 5console.log(multiArray[0][0]); // Output: 1 6console.log(multiArray[0][1]); // Output: 2`

Working with multi-dimensional arrays and indexing will enhance your understanding of handling complex data!

Just as we modify elements in a one-dimensional array, you can modify elements in a multi-dimensional array using their indices. The first index points to the outer array (or the sub-array), while the second index points to the item inside (or the element in the sub-array):

TypeScript`1let multiArray: any[][] = [[1, 2, 3], ['a', 'b', 'c'], [true, false]]; 2 3// Modifying an element in the first array 4multiArray[0][0] = 100; 5console.log(multiArray); // Output: [ [ 100, 2, 3 ], [ 'a', 'b', 'c' ], [ true, false ] ] 6 7// Modifying an element in the second array 8multiArray[1][2] = 'z'; 9console.log(multiArray); // Output: [ [ 100, 2, 3 ], [ 'a', 'b', 'z' ], [ true, false ] ]`

It is also possible to add or remove elements to and from multi-dimensional arrays, thereby changing their structure:

TypeScript`1multiArray[0].push(4); 2console.log(multiArray); // Output: [ [ 100, 2, 3, 4 ], [ 'a', 'b', 'z' ], [ true, false ] ] 3 4multiArray[1].pop(); 5console.log(multiArray); // Output: [ [ 100, 2, 3, 4 ], [ 'a', 'b' ], [ true, false ] ]`

TypeScript arrays come with a variety of powerful methods for array manipulation. Here is a list of the most commonly used ones:

`indexOf(element)`

: Finds the first index of the provided element in the array.`reverse()`

: Reverses the array in place.`splice(index, deleteCount, itemsToInsert)`

: Changes the original array by removing or replacing existing elements and/or adding new elements in place.

TypeScript`1let fruits: string[] = ['apple', 'banana', 'cherry']; 2 3// Inserting an element 'avocado' at position 1 using .splice() 4fruits.splice(1, 0, 'avocado'); 5console.log(fruits); // Output: [ 'apple', 'avocado', 'banana', 'cherry' ] 6 7// Finding index of an element using .indexOf() 8let index: number = fruits.indexOf('banana'); 9console.log(index); // Output: 2 10 11// Reverse the fruits array 12fruits.reverse(); 13console.log(fruits); // Output: [ 'cherry', 'banana', 'avocado', 'apple' ]`

Excellent work! Throughout this TypeScript journey, while dealing with **Simple Data Structures**, you've explored multi-dimensional arrays and navigated through advanced operations.

Now it's time to reinforce your knowledge with hands-on practice. Try creating tasks such as managing a restaurant menu with categories containing their own specific dishes. Are you ready for the next stage of our TypeScript quest? Let's move on!