Class constructor cannot be invoked without 'new' in JS/TS

# Table of Contents

1. Class constructor cannot be invoked without 'new' in JavaScript
2. Class constructor cannot be invoked without 'new' in TypeScript

The article shows how to solve the error in both JavaScript and TypeScript. If you got the error in TypeScript, scroll down to the next subheading.

You might also get the error message "Value of type 'typeof X' is not callable. Did you mean to include 'new'?", however, the solution is the same.

# Class constructor cannot be invoked without 'new' in JavaScript

The "TypeError: Class constructor cannot be invoked without 'new'" error occurs for 2 reasons:

1. Trying to instantiate a class without using the new operator.
2. Forgetting to extend the Component class in a React.js application.

Here is an example of how the error occurs.

Copied!
class Person {
  constructor(public first: string, public last: string) {
    this.first = first;
    this.last = last;
  }

  getName() {
    return `${this.first} ${this.last}`;
  }
}

// ⛔️ TypeError: Class constructor Person cannot be invoked without 'new'
// ⛔️ Value of type 'typeof Person' is not callable. Did you mean to include 'new'?
const p1 = Person('James', 'Doe');

To solve the error, use the new operator when instantiating the class.

The new operator allows us to create an instance of a class.

Copied!
class Person {
  constructor(
    public first: string,
    public last: string,
  ) {
    this.first = first;
    this.last = last;
  }

  getName() {
    return `${this.first} ${this.last}`;
  }
}

// 👇️ use `new` operator
const p1 = new Person('James', 'Doe');
console.log(p1); // 👉️ {first: 'James', last: 'Doe'}

console.log(p1.getName()); // 👉️ "James Doe"

We used the new operator upon class instantiation. The new operator does 3 things:

1. Creates a new object that inherits the prototype of the class.
2. Calls the constructor function with the provided parameters and binds the this keyword to the newly created object.
3. Returns the newly created object.

If you got the error inside of a React.js application, you most likely forgot to extend from the Component class.

Copied!
import React from 'react';

// ⛔️ Class constructor App cannot be invoked without 'new'
class App {
  render() {
    return <div>Example</div>;
  }
}

export default App;

Alternatively, you can extend the Component class when defining a class in a React.js application.

Copied!
import React from 'react';

// ✅ Now extending Component class
class App extends React.Component {
  render() {
    return <div>Example</div>;
  }
}

export default App;

The extends keyword allows us to specify that the App class is a child of the Component class. In other words, App is a subclass of Component.

If you get the error TypeError: "X" is not a constructor, click on the link.

# Class constructor cannot be invoked without 'new' in TypeScript

The "Class constructor cannot be invoked without new" error occurs when the target property in tsconfig.json is set to lower than es6 or you instantiate a class without the new operator.

To solve the error, set target to es6 and use the new operator when instantiating classes.

The first thing you should do is open your tsconfig.json file and make sure target is set to es6 or more recent.

Copied!
{
  "compilerOptions": {
    "target": "es6",
    // ... your other options
  }
}

The target option sets the language version for the emitted JavaScript files.

If this is the cause of the error, setting target to es6 should resolve it.

Make sure to restart your code editor and development server if the error persists.

# Forgetting to use the new operator when instantiating a class

You might also get the error if you forgot to use the new operator when instantiating a class in TypeScript.

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

// ⛔️ Error: Class constructor Employee cannot be invoked without 'new'
const employee = Employee('James', 100);

To get around this, always make sure to use the new operator when creating instances of a class.

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

// ✅ Works
const employee = new Employee('James', 100);

console.log(employee.name); // 👉️ "James"
console.log(employee.salary); // 👉️ 100

We used the new operator upon class instantiation. The new operator does 3 things:

1. Creates a new object that inherits the prototype of the class
2. Calls the constructor function with the provided parameters and binds the this keyword to the newly created object
3. Returns the newly created object

If you used the extends keyword to extend from a different class, make sure to use the super() function.

If you need to get the argument types for a function or constructor in TypeScript, check out the following article.

I've also written a detailed guide on how to use create-react-app with TypeScript.

# Additional Resources

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

• How to Override a Class method in TypeScript
• TS: 'new' expression whose target lacks construct signature
• Property is private and only accessible within class in TS
• Types have separate declarations of a private property in TS
• An outer value of this is shadowed by this container in TS