ConstructorParameters type in Typescript - Step-by-Step Execution

Concept Flow - ConstructorParameters type

Define Class with Constructor

↓

Use ConstructorParameters<Type>

↓

Extract Constructor Args as Tuple

↓

Use Tuple for Function or Variable

This flow shows how TypeScript extracts constructor argument types as a tuple using ConstructorParameters.

Execution Sample

Typescript

class Person {
  constructor(public name: string, public age: number) {}
}

const args: ConstructorParameters<typeof Person> = ["Alice", 30];

const person = new Person(...args);

Extracts the constructor argument types of Person as a tuple and assigns matching values.

Execution Table

Step	Action	Evaluation	Result
1	Define class Person with constructor(name: string, age: number)	Class Person created	Constructor expects (string, number)
2	Use ConstructorParameters<typeof Person>	Extract constructor args types	Tuple type [string, number]
3	Assign args = ["Alice", 30]	Check if array matches tuple type	Valid assignment
4	Use args to create new Person(...args)	Call constructor with args	Person instance created with name='Alice', age=30
5	End of example	No further steps	Execution stops

💡 All steps complete, constructor parameters extracted and used successfully

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
args	undefined	undefined	undefined	["Alice", 30]	["Alice", 30]

Key Moments - 2 Insights

Why does args have to be a tuple and not just an array?

ConstructorParameters extracts a tuple type representing exact constructor argument types, so args must match that tuple exactly (see execution_table step 3).

Can ConstructorParameters be used on any function?

No, it only works on class constructors or constructor signatures, not regular functions (see execution_table step 2).

Visual Quiz - 3 Questions

Look at the execution table step 2, what type does ConstructorParameters<typeof Person> produce?

A An object type with name and age properties

B A union type string | number

C A tuple type [string, number]

D A single string type

💡 Hint

Check the 'Result' column in step 2 of the execution_table

At which step does the args variable get assigned its value?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the 'Action' column for when args is assigned in execution_table

If the constructor had three parameters, how would the args tuple change?

A It would remain a tuple with two elements

B It would become a tuple with three elements

C It would become an array of any length

D It would become a union of the parameter types

💡 Hint

ConstructorParameters extracts all constructor parameters as a tuple (see concept_flow)

Concept Snapshot

ConstructorParameters<Type> extracts the parameter types of a class constructor as a tuple.
Use it with typeof ClassName to get constructor args types.
The result is a tuple matching the constructor's parameters.
Useful for forwarding constructor arguments or typing factory functions.

Full Transcript

This visual execution trace shows how TypeScript's ConstructorParameters type extracts the argument types from a class constructor as a tuple. We define a class Person with a constructor taking a string and a number. Using ConstructorParameters<typeof Person>, we get the tuple type [string, number]. We assign an array matching this tuple to the variable args. Then we can use args to create a new Person instance. The execution table walks through each step, showing the class definition, type extraction, assignment, and usage. The variable tracker shows args holding the tuple value after assignment. Key moments clarify why args must be a tuple and that ConstructorParameters only works on constructors. The quiz tests understanding of the tuple extraction and assignment steps. The snapshot summarizes the concept for quick reference.

Practice

1.

What does the ConstructorParameters type utility do in TypeScript?

easy

A. Extracts the types of a class constructor's parameters as a tuple

B. Creates a new class with the same constructor parameters

C. Returns the return type of a class constructor

D. Converts constructor parameters into a union type

Solution

1. Step 1: Understand the purpose of ConstructorParameters

   The ConstructorParameters utility extracts the types of the parameters used in a class constructor and returns them as a tuple type.

2. Step 2: Compare with other options

   Options B, C, and D describe different behaviors that ConstructorParameters does not perform.

3. Final Answer:

   Extracts the types of a class constructor's parameters as a tuple -> Option A

4. Quick Check:

   ConstructorParameters = tuple of constructor args [OK]

Hint: Remember: ConstructorParameters gives constructor args as a tuple [OK]

Common Mistakes:

• Confusing ConstructorParameters with ReturnType
• Thinking it creates a new class
• Assuming it returns a union type

2.

Which of the following is the correct syntax to get the constructor parameter types of a class MyClass using ConstructorParameters?

class MyClass { constructor(name: string, age: number) {} }

easy

A. type Params = ConstructorParameters<MyClass>;

B. type Params = ConstructorParameters;

C. type Params = ConstructorParameters;

D. type Params = ConstructorParameters;

Solution

1. Step 1: Identify the correct type argument for ConstructorParameters

   The argument must be a constructor function type, which is typeof MyClass (the class constructor type), not the instance type.

2. Step 2: Check each option

   type Params = ConstructorParameters<MyClass>; uses the instance type, which is incorrect. type Params = ConstructorParameters; uses a non-existent property. type Params = ConstructorParameters; uses invalid syntax. Only type Params = ConstructorParameters; correctly uses typeof MyClass.

3. Final Answer:

   type Params = ConstructorParameters<typeof MyClass>; -> Option B

4. Quick Check:

   Use typeof ClassName with ConstructorParameters [OK]

Hint: Use typeof ClassName to get constructor type [OK]

Common Mistakes:

• Passing instance type instead of constructor type
• Using invalid syntax like new expressions
• Trying to access constructor property

3.

What is the output type of the following code?

class Person {
  constructor(public name: string, public age: number) {}
}

type Params = ConstructorParameters<typeof Person>;

medium

A. [string, string]

B. [name: string, age: number]

C. [string, number]

D. Error: ConstructorParameters cannot be applied

Solution

1. Step 1: Analyze the constructor parameters

   The constructor takes two parameters: name of type string and age of type number.

2. Step 2: Understand ConstructorParameters output

   ConstructorParameters<typeof Person> returns a tuple of the parameter types: [string, number].

3. Final Answer:

   [string, number] -> Option C

4. Quick Check:

   ConstructorParameters returns tuple of constructor arg types [OK]

Hint: ConstructorParameters returns tuple of constructor argument types [OK]

Common Mistakes:

• Expecting parameter names in the tuple
• Confusing parameter types with instance properties
• Thinking it returns an error

4.

Identify the error in this code snippet:

class Car {
  constructor(make: string, year: number) {}
}

type Params = ConstructorParameters<Car>;

medium

A. Car is an instance type, should use typeof Car

B. ConstructorParameters cannot be used with classes

C. Constructor parameters must be public or private

D. Missing parentheses after Car in ConstructorParameters

Solution

1. Step 1: Check the argument passed to ConstructorParameters

   The argument must be the constructor function type, which is typeof Car, not the instance type Car.

2. Step 2: Identify the error

   Using Car directly causes a type error because it is the instance type, not the constructor type.

3. Final Answer:

   Car is an instance type, should use typeof Car -> Option A

4. Quick Check:

   Use typeof ClassName with ConstructorParameters [OK]

Hint: Always use typeof ClassName with ConstructorParameters [OK]

Common Mistakes:

• Passing instance type instead of constructor type
• Assuming ConstructorParameters works on instances
• Adding parentheses after class name

5.

Given the following classes, how can you create a type alias EmployeeParams that matches the constructor parameters of Employee by reusing the constructor parameters of Person?

class Person {
  constructor(public name: string, public age: number) {}
}

class Employee extends Person {
  constructor(name: string, age: number, public salary: number) {
    super(name, age);
  }
}

hard

A. type EmployeeParams = ConstructorParameters<typeof Employee>;

B. type EmployeeParams = [string, number, number];

C. type EmployeeParams = ConstructorParameters<Person> & number;

D. type EmployeeParams = [...ConstructorParameters<typeof Person>, number];

Solution

1. Step 1: Understand the constructor parameters

   Person constructor takes name and age. Employee adds salary as a third parameter.

2. Step 2: Reuse Person's constructor parameters and add salary

   Using ConstructorParameters<typeof Person> gives [string, number]. Adding number for salary creates [string, number, number].

3. Step 3: Check options

   type EmployeeParams = [...ConstructorParameters<typeof Person>, number]; correctly uses tuple spread to combine parameters. type EmployeeParams = ConstructorParameters<typeof Employee>; gets all parameters but does not reuse Person's. type EmployeeParams = ConstructorParameters<Person> & number; is invalid syntax. type EmployeeParams = [string, number, number]; hardcodes types without reuse.

4. Final Answer:

   type EmployeeParams = [...ConstructorParameters<typeof Person>, number]; -> Option D

5. Quick Check:

   Reuse constructor params with tuple spread [OK]

Hint: Use tuple spread to extend ConstructorParameters [OK]

Common Mistakes:

• Not using typeof with class name
• Hardcoding parameter types instead of reusing
• Using invalid intersection (&) instead of tuple spread