Tuple type definition in Typescript - Step-by-Step Execution

Concept Flow - Tuple type definition

Define tuple type with fixed elements

↓

Declare variable with tuple type

↓

Assign values matching tuple types

↓

Access tuple elements by index

↓

Use tuple values in code

This flow shows how to define a tuple type, declare a variable with it, assign values, and access elements by their fixed positions.

Execution Sample

Typescript

type Person = [string, number];
let p: Person = ["Alice", 30];
console.log(p[0]);
console.log(p[1]);

Defines a tuple type Person with a string and a number, assigns values, and prints each element.

Execution Table

Step	Action	Evaluation	Result
1	Define tuple type Person as [string, number]	Type created	Person = [string, number]
2	Declare variable p of type Person	Variable declared	p: Person
3	Assign p = ["Alice", 30]	Check types: string and number	p = ["Alice", 30]
4	Access p[0]	Retrieve first element	"Alice"
5	Access p[1]	Retrieve second element	30
6	Print p[0]	Output to console	Alice
7	Print p[1]	Output to console	30
8	End of code	No more steps	Execution stops

💡 All tuple elements accessed and printed, execution ends.

Variable Tracker

Variable	Start	After Assignment	Final
p	undefined	["Alice", 30]	["Alice", 30]

Key Moments - 3 Insights

Why must the tuple have exactly two elements with specific types?

Because the tuple type Person is defined as [string, number], so p must have exactly two elements: first a string, then a number, as shown in execution_table step 3.

Can I assign p = [30, "Alice"] instead?

No, because the tuple expects the first element to be a string and the second a number. Swapping types would cause a type error, as the assignment check in step 3 shows.

What happens if I access p[2]?

Accessing p[2] is invalid because the tuple only has two elements (indexes 0 and 1). This would cause a runtime error or TypeScript warning, not shown in the execution_table because it is not valid.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of p after step 3?

A ["Alice"]

B [30, "Alice"]

C ["Alice", 30]

D undefined

💡 Hint

Check the 'Result' column in row with Step 3 in execution_table.

At which step does the code print the number 30?

A Step 7

B Step 5

C Step 6

D Step 4

💡 Hint

Look at the 'Action' and 'Result' columns for steps printing values in execution_table.

If you tried to assign p = ["Bob", "thirty"], what would happen?

A Assignment succeeds with no error

B Type error because second element is not a number

C Runtime error when accessing elements

D Tuple length error

💡 Hint

Refer to step 3 where assignment checks types of tuple elements.

Concept Snapshot

Tuple type definition syntax:
type Name = [Type1, Type2, ...];
Declare variable: let v: Name;
Assign values matching types and order.
Access elements by index: v[0], v[1].
Tuple length and types are fixed.

Full Transcript

This example shows how to define a tuple type in TypeScript with fixed types and length. We define a type Person as a tuple with a string and a number. Then we declare a variable p of that type and assign it values matching the types and order. We access each element by its index and print it. The execution table traces each step: defining the type, declaring the variable, assigning values, accessing elements, and printing them. The variable tracker shows how p changes from undefined to the assigned tuple. Key moments clarify why the order and types matter and what happens if you try invalid assignments or access. The quiz tests understanding of the tuple's fixed structure and behavior. The snapshot summarizes the syntax and rules for tuple types in TypeScript.

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