Generic interface declaration in Typescript - Step-by-Step Execution

Concept Flow - Generic interface declaration

Start

↓

Declare generic interface with <T>

↓

Use <T> as type placeholder inside interface

↓

Create object implementing interface with specific type

↓

Access properties with concrete type

↓

End

This flow shows how a generic interface is declared with a type placeholder and then used with a specific type.

Execution Sample

Typescript

interface Box<T> {
  content: T;
}

const box: Box<string> = { content: "apple" };
console.log(box.content);

Defines a generic interface Box with a type T, then creates a Box of string and logs its content.

Execution Table

Step	Action	Evaluation	Result
1	Declare interface Box<T>	T is a placeholder type	Interface Box expects a type parameter T
2	Create object box of type Box<string>	T is replaced by string	box has property content of type string
3	Assign { content: "apple" } to box	content is string, matches type	box.content = "apple"
4	console.log(box.content)	Output the content property	Prints: apple
5	End of execution	No errors	Program ends successfully

💡 All steps complete, generic type replaced by string, output printed

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
T	placeholder	placeholder	string	string	string
box	undefined	undefined	Box<string>	{ content: "apple" }	{ content: "apple" }
box.content	undefined	undefined	undefined	"apple"	"apple"

Key Moments - 3 Insights

Why do we write <T> after interface name?

The <T> declares a placeholder type that can be replaced later with any specific type, as shown in step 1 of the execution_table.

What happens when we write Box<string>?

Box<string> replaces the placeholder T with string, so content must be a string, as seen in step 2 and 3.

Can box.content be a number here?

No, because box is Box<string>, content must be string. Assigning a number would cause a type error, which is prevented by TypeScript.

Visual Quiz - 3 Questions

Look at the execution_table, what type does T represent after step 2?

A string

B number

C boolean

D undefined

💡 Hint

Check the 'Evaluation' column at step 2 where T is replaced by string.

At which step is the value "apple" assigned to box.content?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'Action' and 'Result' columns to find when box.content gets "apple".

If we changed Box<string> to Box<number>, what would change in variable_tracker?

A T would be number but box.content would stay string

B T would stay string but box.content would be number

C T would be number and box.content would be a number

D No change at all

💡 Hint

Refer to how T and box.content change together in variable_tracker.

Concept Snapshot

Generic interface syntax:
interface InterfaceName<T> { property: T; }

Use with specific type:
const obj: InterfaceName<Type> = { property: value };

T is a placeholder replaced by the given type.
Ensures type safety and flexibility.

Full Transcript

This example shows how to declare a generic interface in TypeScript using a placeholder type T. The interface Box<T> has a property content of type T. When we create an object box of type Box<string>, T is replaced by string, so content must be a string. We assign the string "apple" to box.content and print it. The execution table traces each step, showing how T changes from a placeholder to string, and how box.content gets the value. Key moments clarify why we use <T> and how the type replacement works. The quiz tests understanding of type substitution and assignment. The snapshot summarizes the syntax and behavior of generic interfaces.