Exploring Arrays in TypeScript

Lesson Overview

In today's lesson, we'll explore arrays in TypeScript, a versatile and fundamental data structure. An array is an ordered collection of elements that can have specified data types. Just like in other languages, arrays in TypeScript are mutable, meaning their elements can be changed after creation. However, arrays can be made immutable using certain techniques if needed. The beauty of arrays lies in their simplicity and efficiency; they allow for easy storage, access, and manipulation of data. By the end of this lesson, you'll be able to create, manipulate, and understand the unique applications of arrays in TypeScript.

Understanding Arrays

An array in TypeScript is an ordered collection of elements, which can be of any specified type. This means you can have arrays with elements of the same type or mixed types by specifying a union of allowed types, or you can relax type constraints with the any type if needed. Consider this TypeScript array declaration as an example: TypeScript function createMixedArray(): any[] {return ["apple", 42, true, { name: "banana" }, [1, 2, 3]];} // Call the function console.log(createMixedArray()); // Output: ['apple', 42, true, { name: 'banana' }, [1, 2, 3]] This example demonstrates the syntax for arrays using the any type to allow elements of any type without explicit type annotations. The use of any[] indicates that the function returns an array where each element can be of any type, providing flexibility in mixed-type arrays.

Creating Arrays

Creating Arrays TypeScript allows creating arrays using two main syntaxes: the array literal [] and the Array<type> constructor. Both methods enable you to specify element types, ensuring type safety and predictability. In the next TypeScript example, we illustrate array creation with specified types: TypeScript function createArrays() {// Array creation using array literal const arrayLiteral: string[] = ["apple", "banana", "cherry"]; // Array creation using the Array constructor const fromConstructor: Array<string> = new Array("apple", "banana", "cherry"); return { arrayLiteral, fromConstructor };} console.log(createArrays()); // Output: { arrayLiteral: ['apple', 'banana', 'cherry'], fromConstructor: ['apple', 'banana', 'cherry'] } function createArrays() {// Array creation using array literal const arrayLiteral: string[] = ["apple", "banana", "cherry"]; // Array creation using the Array constructor const fromConstructor: Array<string> = new Array("apple", "banana", "cherry"); return { arrayLiteral, fromConstructor };} console.log(createArrays()); // Output: { arrayLiteral: ['apple', 'banana', 'cherry'], fromConstructor: ['apple', 'banana', 'cherry'] } This example demonstrates the syntax for arrays with a specific type using type annotations.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Inspecting and Modifying Arrays

Array elements are accessible via indexes, and indexes in TypeScript arrays are zero-based, meaning the first element has an index of 0. TypeScript’s type checking helps avoid errors when accessing array elements.

The length property of an array returns the number of elements present in the array, which can be used to easily determine its size or iterate over it. Using TypeScript's type system, we can prevent type-based errors from occurring before runtime.

Consider the following TypeScript example for inspecting and modifying arrays:

TypeScript

function inspectArray() {
    // Initialize an array of strings
    const myArray: string[] = ["apple", "banana", "cherry", "durian", "elderberry"];
    
    // Access and log the second element
    console.log(myArray[1]);   // Output: 'banana'
    
    // Access and log the last element using the length property
    console.log(myArray[myArray.length - 1]);  // Output: 'elderberry'
    
    // Slice and log a portion of the array
    console.log(myArray.slice(2, 4)); // Output: ['cherry', 'durian']

    // Create a new array by copying a portion and adding an element
    const newArray: string[] = [...myArray.slice(1, 3), "dragonfruit"];
    console.log(newArray);     // Output: ['banana', 'cherry', 'dragonfruit']
    
    // Freeze the new array to prevent modifications
    Object.freeze(newArray);
    // Attempt to modify the frozen array and handle the potential error
    newArray[0] = "blueberry";
    if (newArray[0] !== "blueberry") {
    console.log("Modification failed because the array is frozen"); // Output: Modification failed because the array is frozen
    }
    // Log the frozen array, confirming no modifications occurred
    console.log(newArray);     // Output: ['banana', 'cherry', 'dragonfruit']
}

inspectArray();

function inspectArray() {
    // Initialize an array of strings
    const myArray: string[] = ["apple", "banana", "cherry", "durian", "elderberry"];
    
    // Access and log the second element
    console.log(myArray[1]);   // Output: 'banana'
    
    // Access and log the last element using the length property
    console.log(myArray[myArray.length - 1]);  // Output: 'elderberry'
    
    // Slice and log a portion of the array
    console.log(myArray.slice(2, 4)); // Output: ['cherry', 'durian']

    // Create a new array by copying a portion and adding an element
    const newArray: string[] = [...myArray.slice(1, 3), "dragonfruit"];
    console.log(newArray);     // Output: ['banana', 'cherry', 'dragonfruit']
    
    // Freeze the new array to prevent modifications
    Object.freeze(newArray);
    // Attempt to modify the frozen array and handle the potential error
    newArray[0] = "blueberry";
    if (newArray[0] !== "blueberry") {
    console.log("Modification failed because the array is frozen"); // Output: Modification failed because the array is frozen
    }
    // Log the frozen array, confirming no modifications occurred
    console.log(newArray);     // Output: ['banana', 'cherry', 'dragonfruit']
}

inspectArray();

slice(start, end): Returns a shallow copy of a portion of the array, starting from the index start up to, but not including, end.
Object.freeze(): Creates a frozen array, preventing modifications to any of its elements, and works in place on the existing array without creating a copy.
Spread operator (...): The spread syntax allows an iterable, such as an array or string, to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected. It can be used for various operations such as merging arrays, passing arguments to functions, or combining objects. In the provided example, it is used for copying elements from one array into a new array.
Accessing elements: Done via zero-based index (e.g., myArray[1] accesses the second element).
Handling frozen arrays: The example checks for modifications using a logical condition, demonstrating that changes do not occur.

TypeScript helps by highlighting errors if you try to modify elements of a frozen array during compile-time, enhancing robustness in development.

Operations on Arrays

TypeScript arrays support a range of operations. The concat() method concatenates two arrays, while loops or the Array.fill() method can be used to repeat elements of an array. The includes() method checks if a particular item is present. Additionally, the map() method creates a new array populated with the results of calling a provided function on every element.

Here's an example using TypeScript for these operations:

TypeScript

function  arrayOperations() {
    const array1: string[] = ["apple", "banana"];
    const array2: string[] = ["cherry", "durian"];
    const array3: string[] = array1.concat(array2);
    console.log(array3);        // Output: ['apple', 'banana', 'cherry', 'durian']

    const array4: string[] = Array(3).fill(array1).flat();
    console.log(array4);        // Output: ['apple', 'banana', 'apple', 'banana', 'apple', 'banana']

    console.log(array1.includes("apple"));  // Output: true
    
    const mappedArray: string[] = array1.map((fruit: string) => `${fruit} pie`);
    console.log(mappedArray);   // Output: ['apple pie', 'banana pie']
}


arrayOperations();

function  arrayOperations() {
    const array1: string[] = ["apple", "banana"];
    const array2: string[] = ["cherry", "durian"];
    const array3: string[] = array1.concat(array2);
    console.log(array3);        // Output: ['apple', 'banana', 'cherry', 'durian']

    const array4: string[] = Array(3).fill(array1).flat();
    console.log(array4);        // Output: ['apple', 'banana', 'apple', 'banana', 'apple', 'banana']

    console.log(array1.includes("apple"));  // Output: true
    
    const mappedArray: string[] = array1.map((fruit: string) => `${fruit} pie`);
    console.log(mappedArray);   // Output: ['apple pie', 'banana pie']
}


arrayOperations();

Here's a breakdown of the array methods used:

concat(anotherArray) returns a new array formed by combining arrays.
Array(n).fill(value) creates a nested array filled with n references to value, resulting in an array of arrays if value itself is an array.
flat() is used to flatten nested arrays into a single dimension.
includes(element) checks if an array contains a specific element, returning true or false.
map(callback) produces a new array with results from applying the callback (here using an arrow function for brevity) to each element in the array. Arrow functions are concise, making them ideal for short inline callbacks.

Nested Arrays and Other Advanced Concepts

An array can contain another array, resulting in a nested array. In nested arrays, you can access elements by chaining indices. TypeScript's type system helps in clearly defining the structure of these arrays.

Here's an example of creating and indexing a nested array in TypeScript:

TypeScript

function createNestedArray(): any[] {
    return ["apple", ["banana", "cherry"]];
}


const nestedArray = createNestedArray();
console.log(nestedArray);  // Output: ['apple', ['banana', 'cherry']]

// Access elements in the nested array
console.log(nestedArray[0]); // Output: 'apple' - top-level array element
console.log(nestedArray[1]); // Output: ['banana', 'cherry'] - sub-array
console.log((nestedArray[1] as string[])[0]); // Output: 'banana' - element within the sub-array
console.log((nestedArray[1] as string[])[1]); // Output: 'cherry' - another element within the sub-array

function createNestedArray(): any[] {
    return ["apple", ["banana", "cherry"]];
}


const nestedArray = createNestedArray();
console.log(nestedArray);  // Output: ['apple', ['banana', 'cherry']]

// Access elements in the nested array
console.log(nestedArray[0]); // Output: 'apple' - top-level array element
console.log(nestedArray[1]); // Output: ['banana', 'cherry'] - sub-array
console.log((nestedArray[1] as string[])[0]); // Output: 'banana' - element within the sub-array
console.log((nestedArray[1] as string[])[1]); // Output: 'cherry' - another element within the sub-array

Array destructuring allows easy extraction of values. TypeScript enhances readability and safety by ensuring that variable types match array element types.

TypeScript

function createNestedObjectArray(): { name: string; models: string[] }[] {
    return [
        { name: "Ford", models: ["Fiesta", "Focus", "Mustang"] },
        { name: "BMW", models: ["320", "X3", "X5"] },
        { name: "Fiat", models: ["500", "Panda"] }
    ];
}
const cars = createNestedObjectArray();
console.log(cars);
// Output: [
//   {name: "Ford", models: ["Fiesta", "Focus", "Mustang"]},
//   {name: "BMW", models: ["320", "X3", "X5"]},
//   {name: "Fiat", models: ["500", "Panda"]}
// ]
// Access elements in the nested object array
console.log(cars[0].models); // Output: ['Fiesta', 'Focus', 'Mustang']
console.log(cars[1].name);   // Output: 'BMW'
console.log(cars[2].models[1]); // Output: 'Panda'

function createNestedObjectArray(): { name: string; models: string[] }[] {
    return [
        { name: "Ford", models: ["Fiesta", "Focus", "Mustang"] },
        { name: "BMW", models: ["320", "X3", "X5"] },
        { name: "Fiat", models: ["500", "Panda"] }
    ];
}
const cars = createNestedObjectArray();
console.log(cars);
// Output: [
//   {name: "Ford", models: ["Fiesta", "Focus", "Mustang"]},
//   {name: "BMW", models: ["320", "X3", "X5"]},
//   {name: "Fiat", models: ["500", "Panda"]}
// ]
// Access elements in the nested object array
console.log(cars[0].models); // Output: ['Fiesta', 'Focus', 'Mustang']
console.log(cars[1].name);   // Output: 'BMW'
console.log(cars[2].models[1]); // Output: 'Panda'

This demonstrates how nested arrays can be used in complex structures, and TypeScript enhances type safety and maintainability.

Exploring Arrays in TypeScript

Lesson Overview

Understanding Arrays

Creating Arrays

Join the 1M+ learners on CodeSignal

Inspecting and Modifying Arrays

Operations on Arrays

Nested Arrays and Other Advanced Concepts

Lesson Summary