Generic array syntax in Typescript - Mini Project: Build & Apply

Generic Array Syntax in TypeScript

📖 Scenario: You are building a simple program to manage a list of favorite fruits. You want to use TypeScript's generic array syntax to store and work with this list safely.

🎯 Goal: Create a TypeScript program that uses generic array syntax to store a list of fruits, add a new fruit, and then display the list.

📋 What You'll Learn

Create a generic array of strings to hold fruit names

Add a new fruit to the array

Use a for loop to iterate over the array

Print each fruit name

💡 Why This Matters

🌍 Real World

Generic arrays help you store lists of items like names, products, or tasks safely with type checking.

💼 Career

Understanding generic arrays is essential for writing clean, error-free TypeScript code in web development and software engineering.

1

Create a generic array of fruits

Create a variable called fruits that is a generic array of strings with these exact values: 'Apple', 'Banana', 'Cherry'.

Typescript

# Create a generic array called fruits with 'Apple', 'Banana', and 'Cherry'
# Your code here

Hint

Use let fruits: Array = [...] to create the array.

2

Add a new fruit to the array

Add the string 'Date' to the fruits array using the push method.

Typescript

let fruits: Array = ['Apple', 'Banana', 'Cherry'];
# Add 'Date' to the fruits array
# Your code here

Hint

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

3

Loop through the fruits array

Use a for loop with the variable fruit to iterate over fruits and collect each fruit name into a new array called fruitList.

Typescript

let fruits: Array = ['Apple', 'Banana', 'Cherry'];
fruits.push('Date');

let fruitList: Array = [];
# Use a for loop with variable fruit to add each fruit from fruits to fruitList
# Your code here

Hint

Use for (let fruit of fruits) { fruitList.push(fruit); } to copy fruits.

4

Print the fruit list

Use console.log to print the fruitList array.

Typescript

let fruits: Array = ['Apple', 'Banana', 'Cherry'];
fruits.push('Date');

let fruitList: Array = [];
for (let fruit of fruits) {
    fruitList.push(fruit);
}

# Print the fruitList array
# Your code here

Hint

Use console.log(fruitList) to show the list.

Practice

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

easy

A. let nums: number = [1, 2, 3];

B. let nums: Array<number> = [1, 2, 3];

C. let nums: Array = [1, 2, 3];

D. let nums: number[] = 123;

Solution

1. Step 1: Understand generic array syntax

   In TypeScript, Array<Type> declares an array holding elements of Type.

2. Step 2: Check each option for correct syntax and type

   let nums: Array<number> = [1, 2, 3]; uses Array<number> with a number array, which is correct. Others have wrong types or assignments.

3. Final Answer:

   let nums: Array<number> = [1, 2, 3]; -> Option B

4. Quick Check:

   Generic array syntax = Array<Type> [OK]

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

Common Mistakes:

• Forgetting to specify the type inside Array<>
• Assigning a non-array value to an array type
• Using Array without type parameter

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

easy

A. let names: string[] = ['Alice', 'Bob'];

B. let names: Array = ['Alice', 'Bob'];

C. let names: string = ['Alice', 'Bob'];

D. let names: [string] = ['Alice', 'Bob'];

Solution

1. Step 1: Recall shorthand array syntax

   In TypeScript, Type[] declares an array of Type.

2. Step 2: Validate each option

   let names: string[] = ['Alice', 'Bob']; correctly uses string[] for an array of strings. Others are incorrect or incomplete.

3. Final Answer:

   let names: string[] = ['Alice', 'Bob']; -> Option A

4. Quick Check:

   Shorthand array syntax = Type[] [OK]

Hint: Use Type[] for quick array declarations [OK]

Common Mistakes:

• Omitting the type inside Array<>
• Using tuple syntax instead of array
• Assigning array to a non-array type

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

function firstElement<T>(arr: Array<T>): T | undefined {
  return arr[0];
}

const nums: number[] = [10, 20, 30];
console.log(firstElement(nums));

medium

A. Error

B. undefined

C. 10

D. 30

Solution

1. Step 1: Understand the generic function behavior

   The function firstElement returns the first element of the array or undefined if empty.

2. Step 2: Apply function to given array

   The array nums has elements [10, 20, 30], so arr[0] is 10.

3. Final Answer:

   10 -> Option C

4. Quick Check:

   firstElement([10,20,30]) = 10 [OK]

Hint: Generic function returns first array item or undefined [OK]

Common Mistakes:

• Assuming function returns last element
• Confusing undefined with zero
• Thinking generic causes error

4. Identify the error in the following TypeScript code snippet:

let fruits: Array<string> = ['apple', 'banana', 5];

medium

A. The array contains a number instead of a string

B. Array<string> syntax is invalid

C. Missing semicolon at the end

D. Array should be declared as string[]

Solution

1. Step 1: Check array element types

   The array is declared to hold strings only.

2. Step 2: Identify type mismatch

   The element 5 is a number, which violates the string type constraint.

3. Final Answer:

   The array contains a number instead of a string -> Option A

4. Quick Check:

   Array<string> must hold only strings [OK]

Hint: Array type must match all element types [OK]

Common Mistakes:

• Mixing types inside a typed array
• Ignoring type errors in arrays
• Confusing syntax errors with type errors

5. You want to create a function in TypeScript that accepts an array of any type and returns a new array with the same elements repeated twice. Which is the correct generic array syntax for the function parameter and return type?

hard

A. function repeatArray<T>(arr: Array): Array<T>

B. function repeatArray(arr: T[]): T[]

C. function repeatArray<T>(arr: T): T[]

D. function repeatArray<T>(arr: Array<T>): Array<T>

Solution

1. Step 1: Define generic parameter and array type

   The function uses a generic type T and takes an array of T elements.

2. Step 2: Ensure return type matches input array type

   The function returns an array of T, so Array<T> is correct for both parameter and return type.

3. Final Answer:

   function repeatArray<T>(arr: Array<T>): Array<T> -> Option D

4. Quick Check:

   Generic function array syntax = Array<T> [OK]

Hint: Use <T> and Array<T> for generic array functions [OK]

Common Mistakes:

• Omitting generic type parameter <T>
• Using non-generic Array without type
• Incorrect parameter or return types