Arrays and Tuples in TypeScript

Understand how to work with arrays and tuples in TypeScript. We'll cover declaring, initializing, and manipulating these data structures.


TypeScript Arrays for Beginners

Declaring and Initializing Arrays

Arrays in TypeScript are ordered collections of items. They can hold values of the same data type or a mix of different data types (though it's generally recommended to stick with one type for better maintainability and type safety). Here's how to declare and initialize them:

Declaring Arrays with Specific Data Types

TypeScript is all about strong typing, so you can declare arrays with specific data types. This helps catch errors early and makes your code more robust.

Syntax

There are two main ways to declare an array with a specific type:

  1. Using the type followed by square brackets []:let arrayName: type[];
  2. Using the Array<type> generic type: let arrayName: Array<type>;

Examples

Array of Numbers

 let numbers: number[]; // Declare an array that can only hold numbers
numbers = [1, 2, 3, 4, 5]; // Initialize the array

let anotherNumbers: Array<number>; // Equivalent declaration using the Array generic
anotherNumbers = [6, 7, 8, 9, 10]; 

Array of Strings

 let names: string[]; // Declare an array that can only hold strings
names = ["Alice", "Bob", "Charlie"];

let anotherNames: Array<string>;
anotherNames = ["David", "Eve", "Frank"]; 

Array of Booleans

 let flags: boolean[]; // Declare an array that can only hold booleans
flags = [true, false, true];

let anotherFlags: Array<boolean>;
anotherFlags = [false, true, false]; 

Array of Any (Generally Avoid!)

 let mixed: any[]; // An array that can hold any type of data (use sparingly!)
mixed = [1, "Hello", true, {name: "John"}];

let anotherMixed: Array<any>;
anotherMixed = [2, "World", false, {name: "Jane"}]; 

Important Note: While using `any[]` gives you flexibility, it defeats the purpose of TypeScript's type checking. Try to avoid using `any[]` unless absolutely necessary. Consider using unions or interfaces if you need to store multiple different types in an array, but with some restrictions.

Initializing Arrays with Values

You can initialize an array when you declare it, or later on.

Initializing During Declaration

 let numbers: number[] = [10, 20, 30]; // Declaration and initialization in one line
let names: string[] = ["Leo", "Mia"];

let anotherNumbers: Array<number> = [40, 50, 60];
let anotherNames: Array<string> = ["Noah", "Olivia"]; 

Initializing After Declaration

 let numbers: number[]; // Declaration
numbers = [100, 200, 300]; // Initialization later

let names: string[];
names = ["William", "Sophia"];

let anotherNumbers: Array<number>;
anotherNumbers = [400, 500, 600];

let anotherNames: Array<string>;
anotherNames = ["James", "Isabella"]; 

When initializing after the declaration, make sure the values you assign match the declared type. If you declared `let numbers: number[]`, you can only assign an array containing numbers to it. Trying to assign an array of strings will result in a TypeScript error.

Empty Arrays

You can create an empty array of a specific type, which you can then populate later.

 let emptyNumbers: number[] = []; // Empty array of numbers
let emptyNames: string[] = [];   // Empty array of strings

let anotherEmptyNumbers: Array<number> = [];
let anotherEmptyNames: Array<string> = [];