Array type annotation syntax in Typescript - Step-by-Step Execution

Concept Flow - Array type annotation syntax

Declare variable with array type

↓

Assign array with matching type

↓

Use array elements with type safety

↓

Compile-time check for type errors

↓

Run program

This flow shows how declaring an array with a type annotation ensures type safety from declaration to usage.

Execution Sample

Typescript

let numbers: number[] = [1, 2, 3];
let fruits: Array<string> = ['apple', 'banana'];

numbers.push(4);
fruits.push('orange');

Declares arrays with type annotations and adds elements, ensuring only correct types are used.

Execution Table

Step	Action	Variable	Value	Type Check Result
1	Declare numbers with type number[]	numbers	undefined	Pass
2	Assign [1, 2, 3] to numbers	numbers	[1, 2, 3]	Pass
3	Declare fruits with type Array<string>	fruits	undefined	Pass
4	Assign ['apple', 'banana'] to fruits	fruits	['apple', 'banana']	Pass
5	Push 4 to numbers	numbers	[1, 2, 3, 4]	Pass
6	Push 'orange' to fruits	fruits	['apple', 'banana', 'orange']	Pass
7	Attempt to push 'hello' to numbers (error)	numbers	[1, 2, 3, 4]	Error: Argument of type 'string' is not assignable to parameter of type 'number'.

💡 Execution stops at step 7 due to type error preventing invalid assignment.

Variable Tracker

Variable	Start	After Step 2	After Step 5	After Step 6	After Step 7
numbers	undefined	[1, 2, 3]	[1, 2, 3, 4]	[1, 2, 3, 4]	[1, 2, 3, 4] (unchanged due to error)
fruits	undefined	undefined	['apple', 'banana']	['apple', 'banana', 'orange']	['apple', 'banana', 'orange']

Key Moments - 3 Insights

Why does pushing a string to numbers cause an error?

Because numbers is declared as number[], TypeScript checks types at step 7 and rejects string values, as shown in execution_table row 7.

What is the difference between number[] and Array<number>?

Both declare an array of numbers. number[] is shorthand, Array<number> is generic syntax. Both behave the same, as seen in steps 1-4.

Can I assign a string array to numbers variable?

No, because numbers expects number[] type. Assigning string[] would cause a type error, preventing unsafe assignments.

Visual Quiz - 3 Questions

Look at the execution_table at step 5, what is the value of numbers?

A [1, 2, 3, 4]

B [1, 2, 3]

C []

D Error

💡 Hint

Check the 'Value' column for step 5 in execution_table.

At which step does a type error occur?

A Step 4

B Step 6

C Step 7

D No error

💡 Hint

Look for 'Error' in the 'Type Check Result' column in execution_table.

If we change fruits to number[], what happens at step 6?

A Push 'orange' succeeds

B Type error occurs

C Array becomes empty

D No change

💡 Hint

Refer to variable_tracker and type rules for fruits array type.

Concept Snapshot

Array type annotation syntax in TypeScript:
- Use number[] or Array<number> to declare arrays of numbers.
- Ensures only elements of specified type are allowed.
- Type errors occur at compile time if types mismatch.
- Helps catch bugs early and improves code safety.

Full Transcript

This lesson shows how to declare arrays with type annotations in TypeScript using number[] or Array<number>. The code example declares two arrays, numbers and fruits, with their types. It then adds elements to these arrays. The execution table traces each step, showing variable values and type check results. At step 7, pushing a string to numbers causes a type error because numbers expects only numbers. The variable tracker shows how arrays change after each step. Key moments clarify common confusions about type errors and syntax differences. The quiz tests understanding of array values and type errors. The snapshot summarizes the syntax and benefits of array type annotations.