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.

Practice

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

easy

A. A special type that only accepts strings

B. A variable name for a function

C. A keyword to declare a constant

D. A placeholder for a type that will be specified later

Solution

1. Step 1: Understand generic syntax

   The <T> syntax in TypeScript is used to declare a generic type parameter, which acts as a placeholder for a type.

2. Step 2: Identify the role of T

   This placeholder allows the interface to be flexible and reusable with different types specified later.

3. Final Answer:

   A placeholder for a type that will be specified later -> Option D

4. Quick Check:

   Generic <T> = Type placeholder [OK]

Hint: Remember <T> means 'type to be given later' [OK]

Common Mistakes:

• Thinking T is a variable or constant
• Confusing <T> with a function parameter
• Assuming T is always a string type

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

easy

A. interface Box<T> = { content: T; }

B. interface Box<T> { content: T; }

C. interface Box<T> content: T;

D. interface Box { content: T; }

Solution

1. Step 1: Check interface declaration syntax

   In TypeScript, interfaces are declared with the keyword interface followed by the name and optional generic parameters in angle brackets.

2. Step 2: Verify correct use of braces and type parameter

   The correct syntax includes curly braces to define the interface body and uses <T> to declare the generic type parameter.

3. Final Answer:

   interface Box<T> { content: T; } -> Option B

4. Quick Check:

   Generic interface syntax = interface Box<T> { content: T; } [OK]

Hint: Generic interfaces need <T> and braces {} [OK]

Common Mistakes:

• Omitting the generic parameter <T>
• Missing curly braces around interface body
• Using equals sign instead of braces

3. Given the interface declaration:

interface Container<T> { value: T; }

What is the output of this code?

const numberContainer: Container<number> = { value: 42 };
console.log(numberContainer.value);

medium

A. Error: Type mismatch

B. undefined

C. 42

D. null

Solution

1. Step 1: Understand the generic interface usage

   The interface Container<T> expects a type parameter. Here, number is specified, so value must be a number.

2. Step 2: Analyze the assigned object and console output

   The object { value: 42 } matches the interface with value as a number. Logging numberContainer.value prints 42.

3. Final Answer:

   42 -> Option C

4. Quick Check:

   Generic with number type outputs 42 [OK]

Hint: Generic type sets property type; output matches assigned value [OK]

Common Mistakes:

• Expecting a runtime error due to generics
• Confusing generic type with runtime type enforcement
• Assuming output is undefined or null

4. Identify the error in this generic interface usage:

interface Pair<T> {
  first: T;
  second: T;
}

const pair: Pair = { first: 'hello', second: 'world' };

medium

A. Missing generic type argument when using Pair

B. Properties first and second should be numbers

C. Interface Pair cannot have two properties of the same type

D. Object literal syntax is incorrect

Solution

1. Step 1: Check interface usage with generics

   The interface Pair<T> requires a type argument when used. Here, Pair is used without specifying <T>.

2. Step 2: Identify the missing generic argument error

   TypeScript will report an error because the generic type parameter is missing when declaring pair.

3. Final Answer:

   Missing generic type argument when using Pair -> Option A

4. Quick Check:

   Generic interface usage needs type argument [OK]

Hint: Always specify type argument when using generic interfaces [OK]

Common Mistakes:

• Forgetting to add <Type> when using generic interfaces
• Assuming default type if omitted
• Confusing property types with generic parameter

5. You want to create a generic interface Result<T> that holds a data property of type T and a success boolean. Which of the following implementations correctly uses this interface to type a variable holding a string result?

hard

A. const res: Result<string> = { data: 'Done', success: true };

B. const res: Result<string> = { data: 123, success: true };

C. const res: Result = { data: 'Done', success: true };

D. const res: Result<number> = { data: 'Done', success: true };

Solution

1. Step 1: Understand the generic interface requirements

   The interface Result<T> expects a data property of type T and a success boolean.

2. Step 2: Check each option for correct type usage

   const res: Result<string> = { data: 123, success: true }; assigns a number to data but expects a string type, so it's incorrect.
   const res: Result<string> = { data: 'Done', success: true }; correctly assigns a string to data and includes success.
   const res: Result = { data: 'Done', success: true }; omits the generic type argument, which is required.
   const res: Result<number> = { data: 'Done', success: true }; uses number type but assigns a string, causing a type mismatch.

3. Final Answer:

   const res: Result<string> = { data: 'Done', success: true }; -> Option A

4. Quick Check:

   Generic type matches property type = const res: Result<string> = { data: 'Done', success: true }; [OK]

Hint: Match generic type with property value type exactly [OK]

Common Mistakes:

• Assigning wrong type to generic property
• Omitting generic type argument
• Mixing up generic type parameters