Rest elements in tuples in Typescript - Mini Project: Build & Apply

Rest elements in tuples

📖 Scenario: You are organizing a small party and want to keep track of the guests arriving. Each guest's information includes their name, age, and any number of favorite snacks they bring along.

🎯 Goal: Create a tuple to store guest information with rest elements to hold multiple favorite snacks. Then extract and display the guest's name, age, and their favorite snacks.

📋 What You'll Learn

Create a tuple called guest with the first element as a string for the name, the second element as a number for the age, and the rest elements as strings for favorite snacks.

Create a variable called name to hold the guest's name.

Create a variable called age to hold the guest's age.

Create a variable called snacks to hold the rest of the favorite snacks.

Print the guest's name, age, and favorite snacks.

💡 Why This Matters

🌍 Real World

Tuples with rest elements help store fixed and variable data together, like user info plus multiple preferences or items.

💼 Career

Understanding tuple rest elements is useful for TypeScript developers working with complex data structures in web apps or APIs.

1

Create the guest tuple with rest elements

Create a tuple called guest with these exact values: 'Alice' as the name, 30 as the age, and 'Chips', 'Cookies', 'Soda' as favorite snacks.

Typescript

# Create the tuple guest with name, age, and favorite snacks
# Your code here

Hint

Use a tuple type with rest elements: [string, number, ...string[]].

2

Extract name and age from the tuple

Create variables called name and age by destructuring the first two elements of the guest tuple.

Typescript

const guest: [string, number, ...string[]] = ['Alice', 30, 'Chips', 'Cookies', 'Soda'];
# Destructure name and age from guest
# Your code here

Hint

Use array destructuring to get the first two elements.

3

Extract the rest of the favorite snacks

Create a variable called snacks by destructuring the rest elements from the guest tuple after name and age.

Typescript

const guest: [string, number, ...string[]] = ['Alice', 30, 'Chips', 'Cookies', 'Soda'];
const [name, age] = guest;
# Destructure the rest of the snacks
# Your code here

Hint

Use the rest operator ... in destructuring to get the remaining elements.

4

Print the guest details

Write a console.log statement to print the guest's name, age, and snacks in this exact format: Name: Alice, Age: 30, Snacks: Chips, Cookies, Soda.

Typescript

const guest: [string, number, ...string[]] = ['Alice', 30, 'Chips', 'Cookies', 'Soda'];
const [name, age, ...snacks] = guest;
# Print the guest details
# Your code here

Hint

Use a template string and Array.join to format the snacks list.

Practice

1.

What is the main purpose of using rest elements in TypeScript tuples?

easy

A. To define the exact fixed length of a tuple

B. To make tuples immutable

C. To allow tuples to contain only one type of element

D. To collect multiple elements into a single tuple part

Solution

1. Step 1: Understand rest elements in tuples

   Rest elements gather multiple items into one part of a tuple, allowing flexible length.

2. Step 2: Identify the purpose

   This means rest elements help collect many elements into one part of a tuple, not fix length or types.

3. Final Answer:

   To collect multiple elements into a single tuple part -> Option D

4. Quick Check:

   Rest elements collect multiple items [OK]

Hint: Rest elements gather extra items [OK]

Common Mistakes:

• Thinking rest elements fix tuple length
• Using ... without array type
• Confusing rest elements with tuple immutability

2.

Which of the following is the correct syntax for a tuple with a rest element in TypeScript?

type MyTuple = [number, ...string[]];

easy

A. type MyTuple = [number, string...];

B. type MyTuple = [...number, string[]];

C. type MyTuple = [number, ...string[]];

D. type MyTuple = [number, ...string];

Solution

1. Step 1: Check rest element syntax

   Rest elements use three dots (...) before a type array, placed at the end.

2. Step 2: Validate each option

   type MyTuple = [number, ...string[]]; correctly uses [...string[]] after number. Others misuse syntax or placement.

3. Final Answer:

   type MyTuple = [number, ...string[]]; -> Option C

4. Quick Check:

   Rest element syntax = ...type[] at end [OK]

Hint: Rest element syntax: ...type[] at tuple end [OK]

Common Mistakes:

• Placing rest element in the middle
• Omitting brackets around rest type
• Using ...type instead of ...type[]

3.

What will be the output of the following TypeScript code?

type Tuple = [string, ...number[]];
const example: Tuple = ['start', 1, 2, 3];
console.log(example.length);

medium

A. 1

B. 4

C. Error

D. 3

Solution

1. Step 1: Understand tuple and rest element

   The tuple starts with a string, then any number of numbers via rest element.

2. Step 2: Count elements in example

   example has 'start', 1, 2, 3 which is 4 elements total.

3. Final Answer:

   4 -> Option B

4. Quick Check:

   Tuple length counts all elements including rest [OK]

Hint: Tuple length includes rest elements count [OK]

Common Mistakes:

• Counting only fixed elements ignoring rest
• Expecting error due to rest element
• Confusing tuple length with rest array length

4.

Identify the error in this tuple type declaration:

type WrongTuple = [...string, number];

medium

A. Rest element must be an array type

B. Rest element must be at the end of the tuple

C. Tuple cannot have more than two elements

D. Number type cannot be used in tuples

Solution

1. Step 1: Check rest element syntax

   Rest elements must use an array or tuple type after ..., like ...string[].

2. Step 2: Analyze given tuple

   Here, ...string uses primitive string, not array/tuple type, invalid syntax.

3. Final Answer:

   Rest element must be an array type -> Option A

4. Quick Check:

   Rest element type = array/tuple only [OK]

Hint: Rest element requires array/tuple type [OK]

Common Mistakes:

• Using ... with non-array type like ...string
• Thinking rest element can't be array type
• Confusing tuple length limits

5.

Given the tuple type type Data = [string, ...number[], boolean], which of the following assignments is valid?

A) const a: Data = ['hello', 1, 2, true];
B) const b: Data = ['hello', 42];
C) const c: Data = ['hello', 1, 2, 3, false];
D) const d: Data = ['hello', 1, false, 2];

hard

A. Only A and C are valid

B. Only B and D are valid

C. Only C is valid

D. Only D is valid

Solution

1. Step 1: Understand tuple with rest element in middle

   Type [string, ...number[], boolean] means string first, then any numbers, then boolean last.

2. Step 2: Check each assignment

   A) Ends with true (boolean), numbers in middle: ['hello',1,2,true] valid.
   B) Missing boolean after numbers, only string and number: invalid.
   C) Ends with false (boolean), numbers in middle: valid.
   D) Boolean before number (false before 2): invalid order.

3. Final Answer:

   Only A and C are valid -> Option A

4. Quick Check:

   Rest numbers must be between string and boolean [OK]

Hint: Rest numbers must be between first string and last boolean [OK]

Common Mistakes:

• Placing boolean before rest numbers
• Omitting rest numbers entirely
• Assuming rest can be anywhere