TS: 'new' expression whose target lacks construct signature

# TS: 'new' expression whose target lacks construct signature

The "new expression, whose target lacks a construct signature" error occurs when we use the new keyword where it shouldn't be used or use it with a constructor function.

To solve the error, convert the constructor function to a class or remove the new keyword.

Sometimes the solution to the error is to remove the new keyword. If you aren't trying to create an instance of something, you shouldn't use the new keyword.

Here is an example of how the error occurs.

index.ts

Copied!
function Employee(fullName: string, salary: number) {
  this.fullName = fullName;
  this.salary = salary;

  this.getSalary = function () {
    return this.salary;
  };
}

// ⛔️ Error: 'new' expression, whose target lacks a
// construct signature, implicitly has an 'any' type.ts(7009)
const emp1 = new Employee('James Doe', 100);

new expression whose target lacks construct signature

The code for this article is available on GitHub

We used the new keyword with a constructor function which caused the error.

TypeScript wants us to convert the constructor function to a class for better type safety.

# Convert the constructor function to a class

To solve the error in this situation, convert the constructor function to a class.

index.ts

Copied!
class Employee {
  constructor(
    public fullName: string,
    public salary: number,
  ) {
    this.fullName = fullName;
    this.salary = salary;
  }

  getSalary() {
    return this.salary;
  }
}

const emp1 = new Employee('Bobby Hadz', 100);

console.log(emp1.fullName); // 👉️ "Bobby Hadz"
console.log(emp1.getSalary()); // 👉️ 100

convert constructor function to class

The code for this article is available on GitHub

This class creates equivalent objects to the constructor function but allows us to use the new keyword to create instances.

TypeScript offers much better type-checking for classes than it does for constructor functions.

# Using a hacky solution instead

Sometimes you aren't able to convert the function to a class for one reason or another.

If that's the case, you can use this hacky solution.

index.ts

Copied!
function Employee(this: any, fullName: string, salary: number) {
  this.fullName = fullName;
  this.salary = salary;

  this.getSalary = function () {
    return this.salary;
  };
}

// ✅ No type checker errors
const emp1 = new (Employee as any)('Bobby Hadz', 100);

console.log(emp1.fullName); // 👉️ "Bobby Hadz"

console.log(emp1.getSalary()); // 👉️ 100

using hacky solution instead

The code for this article is available on GitHub

The first thing we did was type the this keyword in the Employee function - explicitly setting it to any.

This way we won't get an error when setting properties and methods on this.

We used a type assertion to type the Employee function as any right before using the new keyword.

This gets the type checker to comply but doesn't look great, so it should only be used when you can't convert the constructor function to a class.

In modern code, you rarely see constructor functions because classes are often more intuitive to work with and get better type safety.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

TS: 'new' expression whose target lacks construct signature