Frontend Engineering | VoidX Academy

8. Arrays & Tuples

Structuring Collections of Data

Variables holding single strings or numbers are useful, but applications require lists. A shopping cart holds a list of items. A class holds a list of students. In TypeScript, we must strictly define what type of data is allowed inside these arrays.

Defining Arrays

There are two primary ways to define an array in TypeScript. The most common syntax is adding square brackets [] immediately after the data type.

// A strict array that can ONLY hold numbers
let examScores: number[] = [85, 90, 78];

// TS prevents you from adding a string to a number array
// examScores.push("Hundred"); // ERROR: Argument of type 'string' is not assignable to parameter of type 'number'.

// An array that can ONLY hold strings
let traditionalHalls: string[] = ["Casford", "Ognaa", "Valco"];

The Alternative Syntax (Generic Arrays)

You can also define arrays using the `Array` syntax. Functionally, this is exactly identical to the `type[]` syntax. It is purely a matter of team preference, though `type[]` is much more common.

// These two lines do the exact same thing
let studentNames: string[] = ["Prince", "Alice"];
let employeeNames: Array<string> = ["John", "Sarah"];

Empty Arrays and Type Inference

If you initialize an empty array and don't give it a type, TypeScript is forced to guess. By default, it will guess `any[]`, which defeats the purpose of TypeScript. You must explicitly type empty arrays.

// BAD: TS infers this as any[]
let emptyList = []; 
emptyList.push(1);
emptyList.push("hello"); // No error, chaos ensues.

// GOOD: Explicitly typing the empty array
let secureList: string[] = [];
// secureList.push(1); // ERROR! Protected correctly.

Tuples: Fixed Length, Fixed Order

Standard arrays can be infinitely long, and all items are the same type. But what if you need an array where the first item is always a string, the second is always a number, and it can never be longer than 2 items? This is called a Tuple.

// Defining a Tuple type
let userRecord: [string, number];

// Correct assignment
userRecord = ["PrinceEshun", 20];

// ERROR: The order is wrong! Expected string first, then number.
// userRecord = [20, "PrinceEshun"]; 

// ERROR: Too many elements! It must be exactly 2 items.
// userRecord = ["PrinceEshun", 20, "ExtraData"];

Where are Tuples used?

Tuples are heavily used in modern frameworks like React. The famous useState hook returns exactly a tuple: the first item is the state variable, and the second item is the setter function.

8. Arrays & Tuples

Structuring Collections of Data

Defining Arrays

There are two primary ways to define an array in TypeScript. The most common syntax is adding square brackets [] immediately after the data type.

// A strict array that can ONLY hold numbers
let examScores: number[] = [85, 90, 78];

// TS prevents you from adding a string to a number array
// examScores.push("Hundred"); // ERROR: Argument of type 'string' is not assignable to parameter of type 'number'.

// An array that can ONLY hold strings
let traditionalHalls: string[] = ["Casford", "Ognaa", "Valco"];

The Alternative Syntax (Generic Arrays)

You can also define arrays using the `Array` syntax. Functionally, this is exactly identical to the `type[]` syntax. It is purely a matter of team preference, though `type[]` is much more common.

// These two lines do the exact same thing
let studentNames: string[] = ["Prince", "Alice"];
let employeeNames: Array<string> = ["John", "Sarah"];

Empty Arrays and Type Inference

// BAD: TS infers this as any[]
let emptyList = []; 
emptyList.push(1);
emptyList.push("hello"); // No error, chaos ensues.

// GOOD: Explicitly typing the empty array
let secureList: string[] = [];
// secureList.push(1); // ERROR! Protected correctly.

Tuples: Fixed Length, Fixed Order

// Defining a Tuple type
let userRecord: [string, number];

// Correct assignment
userRecord = ["PrinceEshun", 20];

// ERROR: The order is wrong! Expected string first, then number.
// userRecord = [20, "PrinceEshun"]; 

// ERROR: Too many elements! It must be exactly 2 items.
// userRecord = ["PrinceEshun", 20, "ExtraData"];

Where are Tuples used?

Tuples are heavily used in modern frameworks like React. The famous useState hook returns exactly a tuple: the first item is the state variable, and the second item is the setter function.

8. Arrays & Tuples

Structuring Collections of Data

Defining Arrays

The Alternative Syntax (Generic Arrays)

Empty Arrays and Type Inference

Tuples: Fixed Length, Fixed Order

Where are Tuples used?

Knowledge Check

8. Arrays & Tuples

Structuring Collections of Data

Defining Arrays

The Alternative Syntax (Generic Arrays)

Empty Arrays and Type Inference

Tuples: Fixed Length, Fixed Order

Where are Tuples used?

Knowledge Check