Array type annotation syntax in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare an array of numbers using the shorthand syntax.

Typescript

let numbers: number[1] = [1, 2, 3];

Drag options to blanks, or click blank then click option'

A()

B{}

C[]

D<>

Attempts:

3 left

💡 Hint

Common Mistakes

Using curly braces instead of square brackets.

Using angle brackets which are for generics, not array shorthand.

The correct syntax to declare an array of numbers is number[].

2fill in blank

medium

Complete the code to declare an array of strings using the generic Array syntax.

Typescript

let fruits: Array[1] = ['apple', 'banana', 'cherry'];

Drag options to blanks, or click blank then click option'

A{}

B<string>

C[]

D()

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses instead of angle brackets.

Using square brackets which is shorthand, not generic syntax.

The generic syntax for an array of strings is Array<string>.

3fill in blank

hard

Fix the error in the array type annotation syntax.

Typescript

let scores: number[1] = [10, 20, 30];

Drag options to blanks, or click blank then click option'

A[]

B<>

C{}

D()

Attempts:

3 left

💡 Hint

Common Mistakes

Using angle brackets which are for generics, not shorthand arrays.

Using parentheses or curly braces which are invalid here.

The correct array type annotation uses square brackets [] after the type.

4fill in blank

hard

Fill both blanks to declare an array of booleans using generic syntax.

Typescript

let flags: Array[1] = [2];

Drag options to blanks, or click blank then click option'

A<boolean>

B[true, false, true]

C[false, true]

D<string>

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong type inside angle brackets.

Using a string array instead of boolean array.

The generic array syntax is Array<boolean> and the array value is [true, false, true].

5fill in blank

hard

Fill all three blanks to declare an array of objects with a specific type.

Typescript

type Person = { name: string, age: number };
let people: [1] = [2];

people.push([3]);

Drag options to blanks, or click blank then click option'

AArray<Person>

B[{ name: 'Alice', age: 30 }]

C{ name: 'Bob', age: 25 }

DPerson[]

Attempts:

3 left

💡 Hint

Common Mistakes

Using shorthand array syntax instead of generic syntax for the type.

Pushing a non-object or missing required properties.

The array type can be declared as Array<Person>. The initial array is [{ name: 'Alice', age: 30 }]. To add a new person, use an object like { name: 'Bob', age: 25 }.

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