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

Need a 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

Need a 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

Need a 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

Need a hint?

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