Tuple with fixed length and types in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this tuple length check?

Consider the following TypeScript code that defines a tuple with fixed length and types. What will be the output when checking the length of the tuple?

Typescript

const user: [string, number, boolean] = ['Alice', 30, true];
console.log(user.length);

A 3

B 2

C Error: Tuple length not accessible

D undefined

💡 Hint

Remember that tuples are arrays with fixed length, so length property works.

The tuple user has exactly three elements: a string, a number, and a boolean. The length property returns the number of elements, which is 3.

❓ Predict Output

intermediate

What is the output of accessing a tuple element?

Given this tuple declaration, what will be the output of accessing the second element?

Typescript

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

A Error: Index out of range

B undefined

C 10

D 20

💡 Hint

Tuple elements are accessed by zero-based index.

The tuple point has two numbers. The element at index 1 is the second element, which is 20.

❓ Predict Output

advanced

What error occurs when assigning wrong types to a tuple?

What error will TypeScript show for this code?

Typescript

let data: [string, number] = ['hello', 'world'];

A Type 'string' is not assignable to type 'number'.

B No error, assignment is valid.

C Type 'string' is not assignable to type 'string'.

D SyntaxError: Invalid tuple declaration.

💡 Hint

Check the type of the second element in the tuple.

The tuple expects a number as the second element, but a string was given. TypeScript reports a type mismatch error.

❓ Predict Output

advanced

What is the output of this tuple destructuring with fixed types?

Given the tuple and destructuring below, what will be logged?

Typescript

const rgb: [number, number, number] = [255, 100, 50];
const [red, green, blue] = rgb;
console.log(`Red: ${red}, Green: ${green}, Blue: ${blue}`);

A Red: 100, Green: 50, Blue: 255

B Red: 255, Green: 100, Blue: 50

C Red: undefined, Green: undefined, Blue: undefined

D Error: Destructuring failed

💡 Hint

Tuple elements are destructured in order.

The tuple rgb has three numbers representing colors. Destructuring assigns them in order to red, green, and blue. The output shows their values correctly.

🧠 Conceptual

expert

What is the type of the variable after this tuple operation?

Consider this TypeScript code snippet. What is the type of variable result after the operation?

Typescript

const tuple1: [string, number] = ['age', 25];
const tuple2: [string, number] = ['score', 100];
const result = [...tuple1, ...tuple2];

A Array<string | number>

B string[]

C [string, number, string, number]

D Error: Cannot spread tuples

💡 Hint

In TypeScript, spreading multiple tuples infers a new tuple type by concatenating their element types.

In TypeScript, the spread operator on tuples infers a new tuple type that concatenates the types of the spread tuples in order. Here, spreading two [string, number] tuples results in [string, number, string, number].