Error: Attempting to call a function on a type that does not have a callable signature. The type 'Number' does not support calling functions

Previous inquiries on this topic have left me with unanswered questions.

As a newcomer, I've been exploring TypeScript's import and export functionality. Below is the code snippet I've come up with. Your feedback would be greatly appreciated.

I've divided my files into three:

 1.animal.ts
 2.bird.ts
 3.application.ts

Animal.ts:-

export class Animal {
    name:string
    age:number
    constructor(name:string,age:number){
        this.name=name;
        this.age=age
    }
    
    sleep(){
        console.log("I do sleep")
    }

    eat(){
        console.log("I do eat")
    }
}

bird.ts

import {Animal} from "./animal"

export class Bird extends Animal{

    constructor(name:string,age:number){
        super(name,age)
    }

    fly(){
        console.log("I can fly also")
    }
}

application.ts

import { Animal } from "./animal"
import { Bird } from "./bird"

class Application {

    constructor() {
        console.log("Hi i am a bird !!")
    }
}

var animal = new Animal("Rhino", 10);
var bird = new Bird("Pigeon", 3)

animal.age();   //Cannot invoke an expression whose type lacks a call signature. Type 'Number' has no compatible call signatures
animal.name();  //Cannot invoke an expression whose type lacks a call signature. Type 'String' has no compatible call signatures.

bird.age();     //Cannot invoke an expression whose type lacks a call signature. Type 'Number' has no compatible call signatures
bird.fly();
bird.sleep();

What steps should I take to resolve this issue? And could you explain what this error message really signifies?

Answer №1

bird.getAge() may not function as intended since it is a number value. However, calling console.log(bird.age) should provide the desired result.

bird.fly() should work properly as it is a method defined for the bird object.

This same pattern applies to resolving any other potential issues that may arise.

Answer №2

The issue you are encountering is not related to imports or exports, as they appear to be functioning correctly. The error message:

Cannot invoke an expression whose type lacks a call signature. Type 'Number' has no compatible call signatures

clearly explains the problem. You are attempting to use age() as if it were a function, despite it being a number value without a call signature. While you can perform operations like addition or printing with numbers, calling them like functions is not possible. This is evident by how the other lines in your code do not encounter this issue since they are being used properly.

Answer №3

If you're encountering this error, it could be due to attempting to access a property of a class using parentheses. For example, let's say you have a class with a property defined as follows:

private get downloadFileUrl(): string {
    return `${this._baseUrl}/downloadFile`;
}

And then you try to access this property like so:

let url = this.downloadFileUrl();

This will result in an error message stating:

Cannot invoke an expression whose type lacks a call signature. Type 'String' has no compatible call signatures

To resolve this issue and successfully access the property, simply remove the trailing parenthesis when accessing it:

let url = this.downloadFileUrl;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Typescript's mock function allows developers to create mock implementations of

Here is the code that needs to be mocked: const P = { scripts: { getScripts: (name?: any) => { // do some stuff and return json return { foo: 'value'}; } } } export default P; The code needing ...

Unable to locate the specified environment variable in the current nest

Currently, I am referring to the official documentation on the NestJs website that provides a guide on using config files: https://docs.nestjs.com/techniques/configuration Below is the code snippet I am working with: app.module import { Module } from &ap ...

Questioning the syntax of a TypeScript feature as outlined in the documentation

I have been studying the Typescript advanced types documentation, available at this link. Within the documentation, there is an example provided: interface Map<T> { [key: string]: T; } I grasp the concept of the type variable T in Map. However ...

Utilizing Typescript to bind the 'this' keyword to array sorting

Currently, I am transitioning a functional JS solution to Typescript. In my possession is an array of objects containing geolocation data in the form of latitude and longitude coordinates. My goal is to arrange these objects based on their proximity to a ...

Troubleshooting Google Authorization Issue in Angular 17: How to Fix the Error TS2304: 'google' Not Found in Angular 17

I am encountering an issue while attempting to integrate Google Auth into my Angular(+Express) application using the Google Identity Services library. Despite following the instructions provided in the Google tutorial, I am facing the error: "[ERROR] TS230 ...

Having trouble exporting the APK file from Ionic

After running the ionic cordova build android --prod --release command, I encountered a compilation error with the following details. View the first part of the error Check out the second part of the error This is the output of my ionic info. View my i ...

Array of generic types in Typescript

Here's a method that I have: getFiveObjectsFromArray(array: T[]) { return array.slice(0, 5); } I've been using this method multiple times. Is there a way in TypeScript to pass a generic argument instead of using multiple types? Also, when ...

Retrieve an enumeration from a value within an enumeration

In my coding project, I have an enum called Animals and I've been working on a function that should return the value as an enum if it is valid. enum Animals { WOLF = 'wolf', BADGER = 'badger', CAT = 'cat', } cons ...

What is the best way to enforce input requirements in Typescript?

I am currently facing an issue with two required inputs that need to be filled in order to enable the "Add" button functionality. I have considered using *ngIf to control the visibility of the button based on input values, but it seems to not be working. ...

Angular 6 - detecting clicks outside of a menu

Currently, I am working on implementing a click event to close my aside menu. I have already created an example using jQuery, but I want to achieve the same result without using jQuery and without direct access to the 'menu' variable. Can someon ...

Converting the 'require' call to an import may be a more efficient method when importing package.json in a typescript file

In my current project, I am creating a class where I am directly accessing the package version number like this: const pkg = require('../package.json') export class MyClass() { constructor() { // Set the base version from package.jso ...

"I'm looking for a way to store and fetch TypeScript objects with PouchDB. Any suggestions on

As someone who is new to typescript and web development, I am eager to incorporate PouchDB into my typescript project to store my objects. Despite the lack of documentation, I am struggling to find the correct approach. I have created typescript objects t ...

What advantages do binary shifts offer in enums?

What do you think about this code snippet? /** * Bitmask of states */ export const enum ViewState { FirstCheck = 1 << 0, // result is 1 ChecksEnabled = 1 << 1, // result is 2 Errored = 1 << 2, // result is 4 ...

Issue with Datatables not loading on page reload within an Angular 7 application

Incorporating jQuery.dataTables into my Angular 7 project was a success. I installed all the necessary node modules, configured them accordingly, and added the required files to the angular.json file. Everything functioned perfectly after the initial launc ...

I'm experiencing an issue with redirect in Nextjs that's causing an error message to appear. The error reads: "SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

I'm currently diving into the world of NextJS and working on creating a simple recipe application. Utilizing the new App Router has been smooth sailing for the most part, except for one hiccup with the login function. After successfully logging in (us ...

Should mutators be encapsulated within a class contained in a JS Module for better code organization and maintainability?

In order to maximize functionality of our new product using JavaScript, we have implemented an Authentication module that manages a tokenPromise which is updated upon user logins or token refreshes. It seems imperative to allow for mutation in this process ...

Experiencing a problem with the bundle.js file in Angular Universal

My Angular build is giving me this error in the web browser: Uncaught SyntaxError: expected expression, got '<' in bundle.js When I run the command npm run dev:ssr, no errors are generated. However, when I try to access the application, the ...

React Testing Library - Screen debug feature yields results that may vary from what is displayed in the

Greetings to all who come across this message. I have developed a tic-tac-toe game in typescript & redux with a 3x3 grid, and now I am facing some challenges while trying to write unit tests for it. Consider the following game board layout where X represen ...

What are the new features for listening to events in Vue 3?

Currently, I am manually triggering an event: const emit = defineEmits<{ (e: 'update:modelValue', value: string | number): void }>() // [..] <input type="text" :value="modelValue" @input="emit(&apos ...

What is the proper way to bring in Typescript types from the ebay-api third-party library?

My TypeScript code looks like this: import type { CoreItem } from 'ebay-api'; declare interface Props { item: CoreItem; } export default function Item({ item }: Props) { // <snip> } However, I encounter an issue when trying to build ...