Generic factory pattern in Typescript - Step-by-Step Execution

Concept Flow - Generic factory pattern

Call factory with type T

↓

Create instance of T

↓

Return new instance

↓

Use instance in code

The factory receives a type and creates a new instance of that type, then returns it for use.

Execution Sample

Typescript

class Car {
  drive() { return 'Driving'; }
}

function factory<T>(c: new () => T): T {
  return new c();
}

const car = factory(Car);
console.log(car.drive());

This code defines a factory function that creates an instance of a class passed as a type and constructor, then calls a method on the created instance.

Execution Table

Step	Action	Evaluation	Result
1	Call factory with Car	factory<Car>(Car)	Enter factory function
2	Create new instance	new Car()	Car instance created
3	Return instance	return new Car()	Car instance returned
4	Assign to variable	const car = factory(Car)	car holds Car instance
5	Call method	car.drive()	'Driving' returned
6	Output result	console.log(car.drive())	Prints: Driving

💡 Execution ends after printing 'Driving' to console.

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
car	undefined	Car instance created	Car instance assigned	Car instance with drive method

Key Moments - 3 Insights

Why do we use 'new c()' inside the factory?

Because 'c' is a constructor function passed to the factory, 'new c()' creates a new instance of the class. See execution_table step 2.

How does TypeScript know what type 'car' is?

The factory function uses a generic type 'T' and the constructor signature 'new () => T', so when called with 'Car', TypeScript infers 'car' is of type 'Car'. See execution_table step 1 and 4.

What if the class constructor needs parameters?

This simple factory expects constructors with no parameters. To handle parameters, the factory signature and call must be adjusted. This example shows the basic pattern. See code sample.

Visual Quiz - 3 Questions

Look at the execution_table, what is the result of step 3?

A The factory function is called

B A new Car instance is returned

C The drive method is executed

D The console prints 'Driving'

💡 Hint

Check the 'Result' column in execution_table row for step 3.

At which step is the variable 'car' assigned a value?

A Step 4

B Step 2

C Step 5

D Step 6

💡 Hint

Look at the 'Action' and 'Result' columns in execution_table for assignment.

If the factory function did not use 'new', what would happen?

A It would create a new instance anyway

B It would throw a syntax error

C It would return the class itself, not an instance

D It would call the drive method automatically

💡 Hint

Recall that 'new' creates an instance; without it, the class constructor is not called.

Concept Snapshot

Generic factory pattern in TypeScript:
- Use a generic function with a constructor signature: function factory<T>(c: new () => T): T
- Inside, create instance with 'new c()'
- Returns a new instance of type T
- Allows creating objects without knowing exact class at compile time
- Works for classes with no-argument constructors

Full Transcript

This example shows a generic factory pattern in TypeScript. The factory function takes a class constructor as input and returns a new instance of that class. The flow starts by calling the factory with a class type, then inside the factory, it creates a new instance using 'new c()'. The instance is returned and assigned to a variable. Finally, a method on the instance is called and its result is printed. Variables change from undefined to holding the new instance. Key points include understanding the use of 'new' with a constructor, how TypeScript infers types with generics, and the limitation to no-argument constructors in this simple pattern.