Tuple with fixed length and types in Typescript - Step-by-Step Execution

Concept Flow - Tuple with fixed length and types

Define tuple type with fixed length and types

↓

Create tuple variable with matching values

↓

Access tuple elements by index

↓

Use tuple elements with known types

↓

TypeScript checks length and types at compile time

↓

Code runs with fixed tuple structure

This flow shows how TypeScript defines a tuple with fixed length and types, creates a matching tuple, accesses elements, and enforces type checks.

Execution Sample

Typescript

const person: [string, number] = ["Alice", 30];
console.log(person[0]);
console.log(person[1]);

Defines a tuple with a string and a number, then prints each element.

Execution Table

Step	Action	Evaluation	Result
1	Define tuple type [string, number]	TypeScript sets person as tuple of string and number	person: [string, number]
2	Assign ['Alice', 30] to person	Check length=2 and types string, number	person = ['Alice', 30] passes type check
3	Access person[0]	Retrieve first element	"Alice"
4	Access person[1]	Retrieve second element	30
5	Print person[0]	Output to console	Alice
6	Print person[1]	Output to console	30
7	Try assigning wrong type or length	TypeScript error	Compilation error (not shown at runtime)

💡 Execution ends after printing tuple elements; TypeScript enforces tuple type at compile time.

Variable Tracker

Variable	Start	After Assignment	Final
person	undefined	['Alice', 30]	['Alice', 30]

Key Moments - 3 Insights

Why does TypeScript give an error if I add an extra element to the tuple?

Because the tuple type [string, number] expects exactly two elements. Adding more breaks the fixed length rule, as shown in step 7 of the execution_table.

Can I put a number in the first position of the tuple?

No, the first position must be a string as defined by the tuple type. Assigning a number there causes a type error, as TypeScript checks types at assignment (step 2).

What happens if I access an index outside the tuple length?

TypeScript will warn at compile time that the index is out of range, preventing runtime errors. This is because the tuple length is fixed (step 3 and 4 show valid indices).

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of person[1] at step 4?

A "Alice"

B 30

C undefined

D Type error

💡 Hint

Check the 'Evaluation' and 'Result' columns at step 4 in the execution_table.

At which step does TypeScript check the tuple length and types?

A Step 2

B Step 1

C Step 5

D Step 7

💡 Hint

Look for the step where assignment and type checking happen in the execution_table.

If you try to assign ['Bob', 25, true] to person, what happens according to the execution_table?

A It works fine

B Only first two elements are assigned

C TypeScript error due to extra element

D Runtime error

💡 Hint

Refer to step 7 in the execution_table about wrong length or types.

Concept Snapshot

Tuple with fixed length and types in TypeScript:
- Syntax: const var: [type1, type2] = [val1, val2];
- Length and types fixed at compile time
- Access elements by index with known types
- TypeScript errors if length or types mismatch
- Useful for fixed structured data

Full Transcript

This example shows how TypeScript uses tuples to store fixed-length arrays with specific types. We define a tuple person with a string and a number. When assigning values, TypeScript checks that the array has exactly two elements: a string first and a number second. Accessing elements by index returns values with the expected types. If we try to assign more elements or wrong types, TypeScript gives errors before running the code. This helps catch mistakes early and keeps data structured.

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