TypeScript TypeError: “is not a function”

In this tutorial, I will explain how to fix a TypeScript error, “TypeError: is not a function.” I will explain its root causes and solutions to help you debug your code. We will explore various scenarios and provide practical examples to fix the error.

TypeError: “is not a function”

The “TypeError: is not a function” occurs when you attempt to call a value that is not a function in TypeScript. This can happen for several reasons, such as incorrect imports, misassigned variables, or typos in your code. Let me show you some common scenarios and their solutions.

Scenario 1: Incorrect Import or Export

One common cause of this error is incorrect import or export statements. For example, let’s say you have a module userService.ts that exports a function getUser.

// userService.ts
export function getUser(id: number) {
  return { id, name: "John Doe", location: "New York" };
}

And you try to import and use this function in app.ts:

// app.ts
import { getUser } from './userService';

const user = getUser(1);
console.log(user.name);

If you mistakenly use import * as getUser instead of import { getUser }, you will encounter the TypeError.

// Incorrect import
import * as getUser from './userService';

const user = getUser(1); // TypeError: getUser is not a function

Here is the exact error message:

TypeScript TypeError is not a function

Solution

To fix this issue, ensure you are using the correct import syntax:

import { getUser } from './userService';

Check out How to Use the Exclamation Mark in TypeScript?

Scenario 2: Misassigned Variables

Another common scenario for getting the TypeError: “is not a function” is when a variable is mistakenly assigned a non-function value. For example:

let fetchData: Function;

// Later in the code
fetchData = "This is not a function"; // Incorrect assignment

fetchData(); // TypeError: fetchData is not a function

Solution

Ensure that the variable is assigned a function:

fetchData = function() {
  console.log("Fetching data...");
};

fetchData(); // Fetching data...

Read How to Handle Catch Error Types in TypeScript?

Scenario 3: Typo in Method Names

Typographical errors in method names can also lead to this TypeError. Consider the following example:

class UserService {
  getUserById(id: number) {
    return { id, name: "Jane Smith", location: "San Francisco" };
  }
}

const userService = new UserService();
userService.getUserByID(1); // TypeError: userService.getUserByID is not a function

Solution

Double-check the method names for typos:

userService.getUserById(1); // Correct method name

Read How to Use the Double Question Mark (??) Operator in TypeScript?

Scenario 4: Incorrect Context Binding

In JavaScript and TypeScript, the context (this) of a function can change depending on how it is called. This can lead to “is not a function” errors if not handled properly.

class LocationService {
  location = "Los Angeles";

  getLocation() {
    return this.location;
  }
}

const locationService = new LocationService();
const getLocation = locationService.getLocation;

console.log(getLocation()); // TypeError: getLocation is not a function

You can see the exact error in the screenshot below:

TypeError is not a function error in TypeScript

Solution

Bind the function to the correct context:

const getLocation = locationService.getLocation.bind(locationService);

console.log(getLocation()); // Los Angeles

Conclusion

The “TypeError: is not a function” in TypeScript can occur from various issues, including incorrect imports, misassigned variables, typos, and context binding problems. In this tutorial, I explained how to fix the “TypeError: is not a function” in TypeScript, with various examples.

You may also like: