Generic array syntax in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript code using generic array syntax?

Consider the following TypeScript code snippet. What will be logged to the console?

Typescript

const numbers: Array<number> = [1, 2, 3];
const doubled = numbers.map(x => x * 2);
console.log(doubled);

A TypeError at runtime

B [2, 4, 6]

C [1, 2, 3]

D SyntaxError during compilation

💡 Hint

Think about what the map function does to each element in the array.

The map function applies the given function to each element of the array, doubling each number. So the output is [2, 4, 6].

❓ Predict Output

intermediate

What is the type of this generic array in TypeScript?

Given this declaration, what is the type of the variable 'words'?

Typescript

let words: Array<string> = ['hello', 'world'];

A Array of strings

B Array of numbers

C Tuple of strings

D Array of any type

💡 Hint

Look at the generic type inside the angle brackets.

The generic type Array means an array where every element is a string.

🔧 Debug

advanced

Why does this TypeScript code cause a compilation error?

Examine the code below. Why does it cause a TypeScript compilation error?

Typescript

const mixed: Array<number> = [1, 2, '3'];

A Because '3' is a string, not a number, violating the generic type Array<number>

B Because arrays cannot be declared with generic syntax

C Because the array is missing a type annotation

D Because the array is empty

💡 Hint

Check the types of all elements inside the array.

The array is declared to hold only numbers, but '3' is a string, causing a type mismatch error.

❓ Predict Output

advanced

What is the output of this TypeScript code using generic array syntax with union types?

What will be the output of this code snippet?

Typescript

const items: Array<number | string> = [1, 'two', 3];
const filtered = items.filter(item => typeof item === 'number');
console.log(filtered);

A ['two']

B [1, 'two', 3]

C [1, 3]

D TypeError at runtime

💡 Hint

The filter keeps only numbers from the array.

The filter function returns only elements whose type is 'number', so the output is [1, 3].

🧠 Conceptual

expert

How many elements are in the resulting array after this TypeScript code runs?

Consider this code snippet. How many elements does the 'result' array contain after execution?

Typescript

function createArray<T>(length: number, value: T): Array<T> {
  return new Array(length).fill(value);
}
const result = createArray<string>(3, 'hi');

A Undefined

B 1

C 0

D 3

💡 Hint

The fill method fills the array with the given value for the specified length.

The function creates an array of length 3, filled with the string 'hi', so the result has 3 elements.

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