Tuple with fixed length and types in Typescript - Mini Project: Build & Apply

Tuple with fixed length and types

📖 Scenario: You are creating a simple program to store information about a book using a tuple. Each book has a fixed set of details: title, number of pages, and whether it is a bestseller.

🎯 Goal: Build a TypeScript tuple with fixed length and types to hold book information, then access and display the data.

📋 What You'll Learn

Create a tuple with exactly three elements: a string, a number, and a boolean

Use a variable named book to store the tuple

Create a variable named isBestseller to hold the boolean value from the tuple

Print the book title and bestseller status using console.log

💡 Why This Matters

🌍 Real World

Tuples are useful when you want to group a fixed number of related values with different types, like storing a book's details or coordinates.

💼 Career

Understanding tuples helps in writing clear and type-safe code, which is important for software development jobs using TypeScript or similar languages.

1

Create a tuple with fixed length and types

Create a tuple called book with these exact values and types: "The Alchemist" (string), 208 (number), and true (boolean).

Typescript

# Create the tuple 'book' with the specified values and types
// Your code here

Hint

Use square brackets to define the tuple type and assign the values in the same order.

2

Extract the bestseller status from the tuple

Create a variable called isBestseller and assign it the third element of the book tuple.

Typescript

const book: [string, number, boolean] = ["The Alchemist", 208, true];
// Assign the third element of 'book' to 'isBestseller'
// Your code here

Hint

Remember tuple elements are accessed by their index starting at 0.

3

Access and print the book title and bestseller status

Use console.log to print the book title from book[0] and the isBestseller variable in this exact format: "Title: The Alchemist, Bestseller: true".

Typescript

const book: [string, number, boolean] = ["The Alchemist", 208, true];
const isBestseller: boolean = book[2];
// Print the title and bestseller status in the specified format
// Your code here

Hint

Use a template string (backticks) to insert variables inside the string.

4

Display the final output

Run the program to display the output showing the book title and bestseller status exactly as: Title: The Alchemist, Bestseller: true.

Typescript

const book: [string, number, boolean] = ["The Alchemist", 208, true];
const isBestseller: boolean = book[2];
console.log(`Title: ${book[0]}, Bestseller: ${isBestseller}`);
// Run the program to see the output

Hint

Make sure your console.log prints exactly as shown.

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