Tuple type definition in Typescript - Mini Project: Build & Apply

Tuple type definition

📖 Scenario: You are creating a simple program to store information about a book using a tuple. A tuple lets you keep different types of data together in a fixed order.

🎯 Goal: Learn how to define a tuple type in TypeScript and use it to store and display book information.

📋 What You'll Learn

Create a tuple type called Book with three elements: a string for the title, a string for the author, and a number for the year published.

Create a variable called myBook of type Book with the values: title = 'The Hobbit', author = 'J.R.R. Tolkien', year = 1937.

Print the book information in a readable format.

💡 Why This Matters

🌍 Real World

Tuples are useful when you want to group related but different types of data together, like storing information about a book, a point in 2D space, or a person's name and age.

💼 Career

Understanding tuples helps you work with TypeScript data structures effectively, which is important for frontend and backend development jobs that use TypeScript.

1

Define the tuple type Book

Write a tuple type definition called Book that has exactly three elements: a string for the title, a string for the author, and a number for the year published.

Typescript

// Define the tuple type Book here
// Your code here

Hint

Use type Book = [string, string, number]; to define the tuple type.

2

Create a variable myBook of type Book

Create a variable called myBook of type Book and assign it the values: 'The Hobbit', 'J.R.R. Tolkien', and 1937 in that order.

Typescript

type Book = [string, string, number];
// Create the variable myBook of type Book with the given values
// Your code here

Hint

Use const myBook: Book = ['The Hobbit', 'J.R.R. Tolkien', 1937]; to create the variable.

3

Access tuple elements and prepare output

Use the tuple myBook to create a string variable called bookInfo that combines the title, author, and year in this format: 'Title: The Hobbit, Author: J.R.R. Tolkien, Year: 1937'.

Typescript

type Book = [string, string, number];

const myBook: Book = ['The Hobbit', 'J.R.R. Tolkien', 1937];

// Create bookInfo string using myBook tuple elements
// Your code here

Hint

Use template strings and access tuple elements by index like myBook[0].

4

Print the book information

Write a console.log statement to print the bookInfo string.

Typescript

type Book = [string, string, number];

const myBook: Book = ['The Hobbit', 'J.R.R. Tolkien', 1937];

const bookInfo = `Title: ${myBook[0]}, Author: ${myBook[1]}, Year: ${myBook[2]}`;

// Print bookInfo to the console
// Your code here

Hint

Use console.log(bookInfo); to display the information.

Practice

1. What is a tuple type in TypeScript?

easy

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

B. An array that can only contain numbers

C. A variable-length array with any types

D. A function that returns multiple values

Solution

1. Step 1: Understand tuple definition

   A tuple is an array with fixed length and specific types at each position.

2. Step 2: Compare options

   Only 'A fixed-length array with specific types for each position' matches the tuple definition.

3. Final Answer:

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

4. Quick Check:

   Tuple = fixed-length, typed array [OK]

Hint: Tuples fix length and types in order [OK]

Common Mistakes:

• Thinking tuples are just any arrays
• Confusing tuples with functions
• Assuming tuples can change length

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

easy

A. let data: string | number;

B. let data: (string, number);

C. let data: {string, number};

D. let data: [string, number];

Solution

1. Step 1: Recall tuple syntax

   Tuples use square brackets with types separated by commas, e.g., [string, number].

2. Step 2: Check options

   Only let data: [string, number]; uses square brackets correctly. Options B and C use wrong symbols, D is a union type.

3. Final Answer:

   let data: [string, number]; -> Option D

4. Quick Check:

   Tuple syntax = square brackets [OK]

Hint: Use square brackets for tuple types [OK]

Common Mistakes:

• Using parentheses instead of brackets
• Using curly braces which define objects
• Confusing union types with tuples

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

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

medium

A. undefined and undefined

B. 30 and "age"

C. "age" and 30

D. Error: Type mismatch

Solution

1. Step 1: Understand tuple assignment

   The tuple is assigned ['age', 30], so index 0 is 'age' (string), index 1 is 30 (number).

2. Step 2: Check console.log outputs

   console.log(tuple[0]) prints 'age', console.log(tuple[1]) prints 30.

3. Final Answer:

   "age" and 30 -> Option C

4. Quick Check:

   Tuple values printed in order [OK]

Hint: Tuple indexes match type order [OK]

Common Mistakes:

• Swapping tuple elements order
• Expecting errors on correct assignment
• Confusing tuple with object properties

4. Identify the error in this TypeScript tuple declaration:

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

medium

A. The tuple elements are in the wrong order

B. Tuple length is incorrect

C. Missing type annotation

D. No error, code is correct

Solution

1. Step 1: Check tuple type order

   The tuple type expects [string, number], so first element must be string, second number.

2. Step 2: Compare assigned values

   The assigned array is [25, 'John'], which is [number, string], reversed order causing type error.

3. Final Answer:

   The tuple elements are in the wrong order -> Option A

4. Quick Check:

   Tuple type order must match values [OK]

Hint: Match tuple types order exactly [OK]

Common Mistakes:

• Swapping values ignoring type order
• Assuming tuple length mismatch
• Forgetting to add type annotation

5. You want to define a tuple type to store a person's name (string), age (number), and a boolean indicating if they are a student. Which is the correct tuple type and example value?

hard

A. let person: [number, string, boolean] = [25, 'Alice', true];

B. let person: [string, number, boolean] = ['Alice', 25, true];

C. let person: [string, boolean, number] = ['Alice', 25, true];

D. let person: [string, number] = ['Alice', true, 25];

Solution

1. Step 1: Define tuple type order

   The tuple should be [string, number, boolean] for name, age, and student status respectively.

2. Step 2: Check example values

   let person: [string, number, boolean] = ['Alice', 25, true]; matches the type order and values: 'Alice' (string), 25 (number), true (boolean).

3. Final Answer:

   let person: [string, number, boolean] = ['Alice', 25, true]; -> Option B

4. Quick Check:

   Tuple type matches value order and types [OK]

Hint: Order types as data appears in tuple [OK]

Common Mistakes:

• Mixing up type order
• Using wrong types for positions
• Incorrect tuple length