Generic interface for collections in Typescript - Step-by-Step Execution

Concept Flow - Generic interface for collections

Define generic interface<T>

↓

Create collection implementing interface

↓

Use collection with specific type

↓

Access elements with type safety

↓

Perform operations (add, get, size)

↓

End

This flow shows how a generic interface is defined, implemented by a collection, and then used with specific types to ensure type safety.

Execution Sample

Typescript

interface Collection<T> {
  add(item: T): void;
  get(index: number): T | undefined;
  size(): number;
}

class MyCollection<T> implements Collection<T> {
  private items: T[] = [];
  add(item: T): void { this.items.push(item); }
  get(index: number): T | undefined { return this.items[index]; }
  size(): number { return this.items.length; }
}

const numbers = new MyCollection<number>();
numbers.add(10);
numbers.add(20);
console.log(numbers.get(1));

Defines a generic collection interface and a class implementing it, then uses it with numbers and prints the second element.

Execution Table

Step	Action	Variable/Method	Input	Output/State
1	Create instance	numbers	MyCollection<number>	Empty array []
2	Call add	numbers.add	10	items = [10]
3	Call add	numbers.add	20	items = [10, 20]
4	Call get	numbers.get	1	Returns 20
5	Print output	console.log	20	Output: 20

💡 All steps executed; program ends after printing 20.

Variable Tracker

Variable	Start	After 1	After 2	Final
numbers.items	[]	[10]	[10, 20]	[10, 20]

Key Moments - 3 Insights

Why do we use <T> in the interface and class?

The <T> is a placeholder for any type. It lets us write one interface and class that work with any type, like numbers or strings, ensuring type safety as shown in the execution_table steps 1 and 2.

What happens if we try to add a string to numbers collection?

TypeScript will give an error because numbers collection expects only numbers. This is because of the generic type <number> used when creating the instance, as seen in step 1.

Why does get return T | undefined?

Because if the index is out of range, there is no item to return, so it returns undefined. This prevents runtime errors and is shown in the method signature in the code sample.

Visual Quiz - 3 Questions

Look at the execution_table, what is the state of numbers.items after step 3?

A []

B [10, 20]

C [10]

D [20]

💡 Hint

Check the 'Output/State' column in row 3 of the execution_table.

At which step does the program output the value 20?

A Step 2

B Step 4

C Step 5

D Step 3

💡 Hint

Look for the 'Print output' action in the execution_table.

If we change MyCollection<number> to MyCollection<string>, what type of values can we add?

A Only strings

B Only numbers

C Any type

D Only booleans

💡 Hint

Refer to the generic type parameter used in the variable_tracker and code sample.

Concept Snapshot

Generic interface syntax:
interface Collection<T> {
  add(item: T): void;
  get(index: number): T | undefined;
  size(): number;
}

Use <T> to make interfaces reusable for any type.
Implement with class<T> and specify type when creating instance.
Ensures type safety and flexibility.

Full Transcript

This example shows how to define a generic interface Collection with a type parameter T. The interface has methods to add items, get items by index, and get the size. A class MyCollection implements this interface using an internal array. We create an instance numbers of type MyCollection<number> and add two numbers: 10 and 20. Then we get the item at index 1, which is 20, and print it. The execution table traces each step, showing how the internal array changes and when output occurs. Key points include understanding the generic type parameter <T> which allows the interface and class to work with any type, and how TypeScript enforces type safety by preventing adding wrong types. The visual quiz tests understanding of the state after adding items, when output happens, and how changing the generic type affects allowed values.

Practice

1. What does the <T> represent in a generic interface in TypeScript?

easy

A. A function inside the interface

B. A fixed type like number or string

C. A placeholder for any type that will be specified later

D. A variable name for a property

Solution

1. Step 1: Understand generic syntax

   The <T> in TypeScript generics is a placeholder representing any type that will be provided when the interface is used.

2. Step 2: Differentiate from fixed types

   Unlike fixed types like number or string, T is flexible and can represent any type, making the interface reusable.

3. Final Answer:

   A placeholder for any type that will be specified later -> Option C

4. Quick Check:

   Generic <T> = placeholder type [OK]

Hint: Remember <T> means 'any type' placeholder [OK]

Common Mistakes:

• Thinking T is a fixed type
• Confusing T with a function
• Assuming T is a variable name

2. Which of the following is the correct syntax to declare a generic interface named Collection with a type parameter T?

easy

A. interface Collection<T> { items: T[]; }

B. interface Collection { items: T[]; }

C. interface Collection<T> { items: Array; }

D. interface Collection<T> { items: T; }

Solution

1. Step 1: Check generic declaration

   The correct syntax to declare a generic interface uses <T> after the interface name, like interface Collection<T>.

2. Step 2: Verify property type

   The property items should be an array of type T, so items: T[] is correct.

3. Final Answer:

   interface Collection<T> { items: T[]; } -> Option A

4. Quick Check:

   Generic interface syntax = interface Collection<T> { items: T[]; } [OK]

Hint: Generic interface needs <T> and array type T[] [OK]

Common Mistakes:

• Omitting <T> after interface name
• Using Array without type parameter
• Declaring items as single T instead of array

3. Given the interface and usage below, what is the output of console.log(numbers.items[1])?

interface Collection<T> {
  items: T[];
}
const numbers: Collection<number> = { items: [10, 20, 30] };
console.log(numbers.items[1]);

medium

A. 10

B. 20

C. 30

D. undefined

Solution

1. Step 1: Understand the generic interface usage

   The interface Collection<T> is used with number, so items is an array of numbers: [10, 20, 30].

2. Step 2: Access the second element in the array

   Arrays are zero-indexed, so items[1] is the second element, which is 20.

3. Final Answer:

   20 -> Option B

4. Quick Check:

   Array index 1 = 20 [OK]

Hint: Remember arrays start at index 0 [OK]

Common Mistakes:

• Confusing index 1 with index 0
• Assuming generic changes array order
• Expecting undefined for valid index

4. Identify the error in this code snippet using a generic interface:

interface Collection<T> {
  items: T[];
}
const strings: Collection<string> = { items: [1, 2, 3] };

medium

A. The array items contain numbers, but the interface expects strings

B. The interface is missing the generic type parameter

C. The variable strings should be declared with type number

D. The interface property items should not be an array

Solution

1. Step 1: Check the generic type used

   The variable strings is declared as Collection<string>, so items must be an array of strings.

2. Step 2: Check the assigned array type

   The assigned array is [1, 2, 3], which is an array of numbers, not strings, causing a type mismatch error.

3. Final Answer:

   The array items contain numbers, but the interface expects strings -> Option A

4. Quick Check:

   Type mismatch in generic array = The array items contain numbers, but the interface expects strings [OK]

Hint: Check if array elements match generic type [OK]

Common Mistakes:

• Ignoring type mismatch between generic and array
• Forgetting to specify generic parameter
• Assuming interface property can be non-array

5. You want to create a generic interface KeyValueCollection that stores key-value pairs where keys are strings and values can be any type T. Which interface definition correctly achieves this?

hard

A. interface KeyValueCollection<T> { [T: string]: string; }

B. interface KeyValueCollection<T> { keys: string[]; values: T[]; }

C. interface KeyValueCollection<T> { key: string; value: T; }

D. interface KeyValueCollection<T> { [key: string]: T; }

Solution

1. Step 1: Understand key-value pair requirement

   The interface should allow any string as a key and associate it with a value of generic type T.

2. Step 2: Check index signature syntax

   Using [key: string]: T; means any string key maps to a value of type T, which matches the requirement.

3. Step 3: Eliminate other options

   interface KeyValueCollection<T> { keys: string[]; values: T[]; } separates keys and values arrays, which is less direct. interface KeyValueCollection<T> { key: string; value: T; } defines a single pair, not a collection. interface KeyValueCollection<T> { [T: string]: string; } has incorrect syntax.

4. Final Answer:

   interface KeyValueCollection<T> { [key: string]: T; } -> Option D

5. Quick Check:

   Index signature with generic value = interface KeyValueCollection<T> { [key: string]: T; } [OK]

Hint: Use index signature [key: string]: T for generic key-value [OK]

Common Mistakes:

• Using arrays for keys and values separately
• Defining only one key-value pair instead of collection
• Incorrect index signature syntax