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].

Practice

1. What is a tuple in TypeScript?

easy

A. A fixed-length array with specific types for each element

B. A variable-length array with any types

C. A function that returns multiple values

D. A type of object with dynamic keys

Solution

1. Step 1: Understand tuple definition

   A tuple is an array with a fixed number of elements where each element has a specific type.

2. Step 2: Compare with other options

   Options A, B, and C describe other concepts like objects, variable arrays, or functions, not tuples.

3. Final Answer:

   A fixed-length array with specific types for each element -> Option A

4. Quick Check:

   Tuple = fixed length + specific types [OK]

Hint: Remember: tuple = fixed length + fixed types [OK]

Common Mistakes:

• Thinking tuples can have variable length
• Confusing tuples with regular arrays
• Assuming tuples are objects

2. Which of the following is the correct syntax to declare a tuple with a string and a number in TypeScript?

easy

A. let tuple: [string; number] = ['hello', 5];

B. let tuple: (string, number) = ['hello', 5];

C. let tuple: {string, number} = ['hello', 5];

D. let tuple: [string, number] = ['hello', 5];

Solution

1. Step 1: Recall tuple syntax

   Tuples use square brackets with types separated by commas: [type1, type2].

2. Step 2: Check each option

   let tuple: [string, number] = ['hello', 5]; uses correct syntax. Options B, C, and D use invalid tuple syntax.

3. Final Answer:

   let tuple: [string, number] = ['hello', 5]; -> Option D

4. Quick Check:

   Tuple syntax = square brackets with comma-separated types [OK]

Hint: Use square brackets with commas for tuple types [OK]

Common Mistakes:

• Using parentheses instead of brackets
• Using curly braces instead of brackets
• Using semicolons instead of commas

3. What will be the output of the following TypeScript code?

let data: [string, number] = ['age', 30];
console.log(data[0]);
console.log(data[1]);

medium

A. 30\nage

B. undefined\nundefined

C. age\n30

D. Error: Type mismatch

Solution

1. Step 1: Understand tuple assignment

   The tuple 'data' is assigned ['age', 30], so data[0] is 'age' and data[1] is 30.

2. Step 2: Check console.log outputs

   console.log(data[0]) prints 'age', console.log(data[1]) prints 30, so output is two lines: 'age' then '30'.

3. Final Answer:

   age 30 -> Option C

4. Quick Check:

   Tuple elements print in order: string then number [OK]

Hint: Tuple elements print in order by index [OK]

Common Mistakes:

• Swapping the order of elements
• Expecting an error due to types
• Confusing tuple with object properties

4. Identify the error in this TypeScript tuple declaration:

let info: [string, number] = ['John', '25'];

medium

A. The second element should be a number, not a string

B. The tuple length is incorrect

C. The first element should be a number

D. No error, this is valid

Solution

1. Step 1: Check tuple types

   The tuple expects [string, number], so first element string 'John' is correct, second element must be a number.

2. Step 2: Identify type mismatch

   The second element is '25' (a string), which mismatches the expected number type.

3. Final Answer:

   The second element should be a number, not a string -> Option A

4. Quick Check:

   Tuple types must match exactly [OK]

Hint: Check each tuple element type carefully [OK]

Common Mistakes:

• Ignoring type mismatch in tuple elements
• Assuming string '25' is a number
• Thinking tuple length is wrong

5. Given the tuple type [string, number, boolean], which of the following assignments is valid in TypeScript?

hard

A. let t: [string, number, boolean] = ['hello', true, 42];

B. let t: [string, number, boolean] = ['hello', 42, true];

C. let t: [string, number, boolean] = ['hello', 42];

D. let t: [string, number, boolean] = ['hello', 42, 'true'];

Solution

1. Step 1: Check tuple length and types

   The tuple requires exactly three elements: string, number, boolean in that order.

2. Step 2: Evaluate each option

   let t: [string, number, boolean] = ['hello', 42, true]; matches all types and length correctly. let t: [string, number, boolean] = ['hello', true, 42]; swaps number and boolean types. let t: [string, number, boolean] = ['hello', 42]; misses the third element. let t: [string, number, boolean] = ['hello', 42, 'true']; uses a string instead of boolean.

3. Final Answer:

   let t: [string, number, boolean] = ['hello', 42, true]; -> Option B

4. Quick Check:

   Tuple must match length and types exactly [OK]

Hint: Match tuple length and types exactly in order [OK]

Common Mistakes:

• Changing order of types
• Omitting elements
• Using wrong types for elements