Lesson 3

A tuple is a special kind of array in TypeScript where each position has a fixed type and the length is known ahead of time. You declare a tuple by listing the types inside square brackets, separated by commas, like [string, number] for a pair where the first spot must be a string and the second spot must be a number. Tuples are useful when you want to group a fixed number of related values that have different types, such as a name and an age, or an ID and an email address. Unlike regular arrays that hold many values of the same type, tuples let you mix types while keeping each position predictable. You access elements the same way as arrays, using an index in square brackets. TypeScript will warn you if you try to put the wrong type in a specific position. Tuples also support destructuring, which lets you unpack the values into separate variables in one step. They are a great tool for keeping small groups of related data organized and type-safe.

let person: [string, number] = ["Alice", 30];
console.log(person[0]);
console.log(person[1]);

A tuple pairs specific types at fixed positions, like a string followed by a number.

• The type [string, number] means position 0 must be a string and position 1 must be a number.
• person[0] accesses the first element, which is "Alice".
• person[1] accesses the second element, which is the number 30.
• Tuples have a fixed length, so you cannot add extra elements beyond what the type declares.
• If you try to put a number in position 0, TypeScript will give a type error.

let product: [string, number, boolean] = ["Laptop", 999, true];
console.log(product[0]);
console.log(product[1]);
console.log(product[2]);

A tuple can hold more than two values, with a different type at each position.

• The type [string, number, boolean] declares three positions with three different types.
• Position 0 is a string, position 1 is a number, and position 2 is a boolean.
• Each value must match its position's declared type, so you cannot swap "Laptop" and 999.
• product[2] gives true, showing that booleans work inside tuples just like any other type.
• Tuples with three or more positions let you group richer data while keeping every position type-safe.

let point: [number, number] = [10, 20];
point[0] = 5;
console.log(point[0]);
console.log(point[1]);

You can change the value at a specific position in a tuple, as long as the new value matches the declared type.

• The tuple [number, number] holds two numbers representing an x and y coordinate.
• point[0] = 5 replaces the value at position 0 from 10 to 5.
• Position 1 is not affected by the change, so it still holds 20.
• The new value 5 is a number, so it matches the type declared for position 0.
• Modifying a tuple element works the same way as modifying an array element.

let city: [string, number] = ["Tokyo", 37];
let [cityName, pop] = city;
console.log(cityName);
console.log(pop);

Destructuring unpacks a tuple's values into separate named variables in one step.

• Naming a variable name, should often be avoided in browser enviroments, since it can interfere with the built-in global variable window.name
• let [cityName, pop] = city takes position 0 and puts it into cityName, and position 1 into pop.
• cityName automatically gets the type string because position 0 of the tuple is a string.
• pop automatically gets the type number because position 1 of the tuple is a number.
• Destructuring saves you from writing separate lines to extract each value by index.
• The original tuple is not changed by destructuring; it still holds its original values.

let user: [number, string, string] = [1, "Alice", "alice@example.com"];
console.log(user[0]);
console.log(user[1]);
console.log(user[2]);

Tuples can represent a record with an ID, a name, and an email, each at a fixed position.

• The type [number, string, string] stores an ID as a number, then a name and email as strings.
• Position 0 holds the numeric ID 1, position 1 holds "Alice", and position 2 holds "alice@example.com".
• Accessing each position gives you the value at that exact spot, preserving the order you defined.
• Tuples are great for small records where the meaning of each position is clear from context.
• TypeScript ensures you cannot accidentally put an email where the ID should be.

let rgb: [number, number, number] = [255, 0, 0];
rgb[1] = 128;
rgb[2] = 128;
console.log(rgb[0]);
console.log(rgb[1]);
console.log(rgb[2]);

A tuple with three numbers can store RGB color values, and you can update individual channels.

• The tuple [number, number, number] represents red, green, and blue color channels.
• The initial value [255, 0, 0] is pure red, with green and blue set to 0.
• rgb[1] = 128 updates the green channel, and rgb[2] = 128 updates the blue channel.
• After the updates, the tuple becomes [255, 128, 128], which is a lighter pinkish color.
• Each new value must be a number to match the tuple's type declaration.
• Tuples let you model structured data like colors, coordinates, or configuration values with clear typing.