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.