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.

Practice

1. Which of the following is a correct way to declare an array of numbers in TypeScript?

easy

A. let nums: Array;

B. let nums: number;

C. let nums: [number];

D. let nums: number[];

Solution

1. Step 1: Understand array type syntax

   In TypeScript, to declare an array of a specific type, you can use type[] or Array<type>.

2. Step 2: Check each option

   let nums: number[]; uses number[], which is correct. let nums: number; declares a single number, not an array. let nums: [number]; declares a tuple with one number, not a general array. let nums: Array; is missing the type inside Array<>.

3. Final Answer:

   let nums: number[]; -> Option D

4. Quick Check:

   Array of numbers = number[] [OK]

Hint: Use type[] or Array<type> for arrays [OK]

Common Mistakes:

• Forgetting the brackets [] for arrays
• Using just the type without array syntax
• Confusing tuples with arrays

2. Which of the following is the correct syntax to declare an array of strings using the generic Array type in TypeScript?

easy

A. let names: string[];

B. let names: Array[string];

C. let names: Array<string>;

D. let names: Array();

Solution

1. Step 1: Recall generic array syntax

   The generic syntax for arrays in TypeScript is Array<type>, with angle brackets <>.

2. Step 2: Evaluate options

   let names: Array<string>; correctly uses Array<string>. let names: Array[string]; uses square brackets instead of angle brackets, which is invalid. let names: string[]; is valid syntax but uses the shorthand, not generic syntax. let names: Array(); uses parentheses, which is incorrect.

3. Final Answer:

   let names: Array<string>; -> Option C

4. Quick Check:

   Generic array syntax = Array<type> [OK]

Hint: Generic arrays use angle brackets, not square brackets [OK]

Common Mistakes:

• Using square brackets [] instead of angle brackets <>
• Confusing shorthand and generic syntax
• Using parentheses instead of brackets

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

let fruits: string[] = ['apple', 'banana', 'cherry'];
console.log(fruits[1]);

medium

A. apple

B. banana

C. cherry

D. undefined

Solution

1. Step 1: Understand array indexing

   Arrays in TypeScript (and JavaScript) start at index 0. So, fruits[0] is 'apple', fruits[1] is 'banana'.

2. Step 2: Identify the logged value

   The code logs fruits[1], which is 'banana'.

3. Final Answer:

   banana -> Option B

4. Quick Check:

   Index 1 in array = banana [OK]

Hint: Remember arrays start at index 0 [OK]

Common Mistakes:

• Thinking array indexes start at 1
• Confusing array elements with their indexes
• Expecting the whole array instead of one element

4. Identify the error in this TypeScript array declaration and fix it:

let scores: Array<number> = [10, 20, '30'];

medium

A. Remove quotes from '30' to make it a number

B. Change 'Array<number>' to 'Array<string>'

C. No error, code is correct

D. Change array to 'number[]' syntax

Solution

1. Step 1: Check array type and elements

   The array is declared as Array<number>, so all elements must be numbers.

2. Step 2: Identify the wrong element

   The element '30' is a string because of quotes, which conflicts with the number type.

3. Step 3: Fix the error

   Remove quotes from '30' to make it a number: 30.

4. Final Answer:

   Remove quotes from '30' to make it a number -> Option A

5. Quick Check:

   Array type must match element types [OK]

Hint: Array type enforces element types strictly [OK]

Common Mistakes:

• Mixing string and number types in typed arrays
• Ignoring type errors in array elements
• Changing array syntax instead of fixing element types

5. You want to declare a variable that holds an array of arrays of booleans in TypeScript using the generic Array type. Which is the correct type annotation?

hard

A. let matrix: Array;

B. let matrix: Array<boolean>;

C. let matrix: boolean[][];

D. let matrix: boolean[];

Solution

1. Step 1: Understand nested arrays

   An array of arrays means each element is itself an array. So the type is an array of arrays of booleans.

2. Step 2: Check each option

   let matrix: boolean[][]; uses shorthand nested arrays boolean[][], which is correct but not the generic syntax. let matrix: Array<boolean>; is a simple array of booleans, not nested. let matrix: Array; uses generic syntax for nested arrays: Array<Array<boolean>>, which is correct. let matrix: boolean[]; is a simple array of booleans.

3. Step 3: Choose the generic nested array syntax

   Since the question asks for the correct type annotation (generic style), let matrix: Array; is the best fit.

4. Final Answer:

   let matrix: Array; -> Option A

5. Quick Check:

   Nested arrays = Array<Array<type>> [OK]

Hint: Nested arrays use Array inside Array or double brackets [OK]

Common Mistakes:

• Using single array type for nested arrays
• Confusing shorthand and generic syntax
• Missing one level of array nesting