How To Solve “‘new’ expression whose target lacks construct signature” in TypeScript

The Error “‘new’ expression whose target lacks construct signature” occurs because we use the new signature with a function. To fix this error, we can convert the function to class or use type assertion.

What causes the error “‘new’ expression whose target lacks construct signature”?

When you use the new signature with a function, this error will occur because the new signature is only used to create a new object from a class, and for a function, it will return a value for us to assign to the variable. So if you use the new signature with a function, this error will arise.

Error Example:

function Student(id: number, fullName: string) {
    this.id = id;
    this.fullName = fullName;
    this.getName = function () {
        return this.fullName;
    };
}

// Using "new" keyword with a function
const student = new Student(12, "John");

Error Output:

'new' expression whose target lacks construct signature

In the above example, we declare a function whose arguments are student information, then we use the new signature to create a new object from this function and assign it to the student variable, and so the error occurs because the new signature is not used in cases like this.

Solution to fix this error

To solve this error, we will use type assertion to convert the function to type any or convert to a class by replacing the function keyword with a class keyword or by not using the new signature with a function anymore.

Using Type Assertion

If you use this way, we will first add this keyword in the parameter declaration, followed by any data type declaration

Example:

// Add this keyword in the parameter declaration
function Student(this: any, id: number, fullName: string) {
    this.id = id;
    this.fullName = fullName;
    this.getName = function () {
        return this.fullName;
    };
}

// Using type assertion to convert to type any
const student = new (Student as any)(12, "John");
console.log(student);

Output:

Student { id: 12, fullName: 'John' }

Convert function to a class

With this approach, the error will not appear anymore because the new signature is now used in the right place.

Example:

// Convert function to class
class Student {
    constructor(public id: number, public fullName: string) {
        this.id = id;
        this.fullName = fullName;
    }

    getName() {
        return this.fullName;
    }
}

const student = new Student(12, "John");
console.log(student);

Output:

Student { id: 12, fullName: 'John' }

Summary

To conclude, the error “‘new’ expression whose target lacks construct signature” occurs because we use the new signature with a function. To fix this error, we can convert the function to class or use type assertion. You should use type assertion in cases where it is not possible to convert a function to a class, such as when working on a framework.

Leave a Reply

Your email address will not be published. Required fields are marked *