“This expression is not callable. Type ‘#’ no call signatures” in TypeScript – How To Fix?

This expression is not callable. Type '#' no call signatures in TypeScript

The error message “This expression is not callable. Type ‘#’ no call signatures in TypeScript” causes you difficulty in developing your application. This article will talk about this issue. Let’s see what solution we provide.

Why do we get the error message: This expression is not callable. Type ‘#’ no call signatures in TypeScript

You try to apply function call syntax on an object and get the error message: This expression is not callable. Type ‘#’ no call signatures in TypeScript. The reason is that you are calling a type that is not a function as a function.

Let’s see the cases where this error occurs through the following examples:

Error case 1:

const message = 'This is a string'

console.log(message())

Output:

This expression is not callable. Type 'String' has no call signatures.

It is easy to see that ‘message’ is a variable of type string when you call ‘message’, which is a string type, as a function call will cause an error.

Error case 2:

function calculateSalary() {
  return{
    setbaseSalary(baseSalary: number){
      return baseSalary;
    },
    setBonus(bonus: number){
      return bonus;
    },
}
}
 
const salary = calculateSalary()
 
salary()

Output:

This expression is not callable. Type '{ setbaseSalary(baseSalary: number): number; setBonus(bonus: number): number; }' has no call signatures.

In this case, we have a function named calculateSalary() that returns an object with two methods, setbaseSalary and setBonus. However, invoking the object without accessing the two methods, setbaseSalary and setBonus will cause an error.

Solution for this error message

To get around this problem, make sure you do not call a function on an object that is not a function. If a function returns the object, then access its properties in the correct syntax.

Continuing with the example above, now let’s fix it:

function calculateSalary() {
  return{
    setbaseSalary(baseSalary: number){
      return baseSalary*1.2;
    },
    setBonus(bonus: number){
      return bonus*2;
    },
}
}
 
//object of function calculateSalary()
const salary = calculateSalary()

//Access to properties
const baseSalary = salary.setbaseSalary(1000)
const bonus = salary.setBonus(100)
 
const totalSalary = baseSalary + bonus
 
console.log('Your total salary this month:  ' + totalSalary + '$')

Output:

"Your total salary this month:  1400$"

Salary‘ is the object returned from the function ‘calculateSalary‘. We use the dot character to access its properties. 

The result we printed out on the console is absolutely correct. Now the error no longer appears.

Please pay attention when using external modules when you import them into another file to use. If you call that module directly as a function, it will cause an error. Ensure accessing its properties exactly like the example above.

Summary

In summary, you have just seen the information related to the error message: This expression is not callable. Type ‘#’ no call signatures in TypeScript. Hopefully, the solution we provide is helpful to you. Thanks for reading the article.

Maybe you are interested:

Leave a Reply

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