Array type annotation syntax in Typescript - Mini Project: Build & Apply

Array type annotation syntax

📖 Scenario: You are creating a simple program to store a list of your favorite fruits using TypeScript. You want to make sure the list only contains strings.

🎯 Goal: Learn how to declare an array with a type annotation in TypeScript and print the list.

📋 What You'll Learn

Create an array variable with a string type annotation

Add a few fruit names as strings to the array

Print the array to the console

💡 Why This Matters

🌍 Real World

Arrays with type annotations help keep your data organized and safe in many real-world apps, like storing lists of names, products, or messages.

💼 Career

Understanding array type annotations is essential for TypeScript developers to write clear, error-free code that works well in teams and large projects.

1

Create a string array with fruits

Create a variable called fruits with type annotation string[] and assign it an array with these exact strings: 'apple', 'banana', 'cherry'.

Typescript

// Create a variable called fruits with type string[] and assign the array ['apple', 'banana', 'cherry']
// Your code here

Hint

Use let fruits: string[] = [...] to declare the array with type annotation.

2

Add a new fruit to the array

Add a new string 'date' to the fruits array using the push method.

Typescript

let fruits: string[] = ['apple', 'banana', 'cherry'];
// Add 'date' to the fruits array using push
// Your code here

Hint

Use fruits.push('date') to add the new fruit.

3

Create a function to print the fruits

Create a function called printFruits that takes a parameter items with type string[] and prints each fruit using a for loop with console.log.

Typescript

let fruits: string[] = ['apple', 'banana', 'cherry'];
fruits.push('date');
// Create function printFruits(items: string[]) that logs each item
// Your code here

Hint

Use function printFruits(items: string[]) and a for...of loop to print each fruit.

4

Call the function to display the fruits

Call the printFruits function with the fruits array to print all fruits to the console.

Typescript

let fruits: string[] = ['apple', 'banana', 'cherry'];
fruits.push('date');
function printFruits(items: string[]) {
    for (let fruit of items) {
        console.log(fruit);
    }
}
// Call printFruits with fruits
// Your code here

Hint

Call printFruits(fruits) to print the fruits.

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