What does “TypeError: is not a function” mean in TypeScript?

In TypeScript, “TypeError: is not a function” is a runtime JavaScript error that appears when you try to call something with () that is not actually a function. The value might be a string, an object, undefined, null, or some other type that cannot be called.

Most of the time, this happens because the variable you are calling does not hold the function you expect at runtime. Common causes include incorrect imports or exports, assigning non‑function values to variables, typos in method names, or calling methods with the wrong this context.

Quick reference: common causes and fixes

TL;DR: how to fix it

This error means that at runtime, the value you are calling with () is not a function. To fix it:

1. Log the value and check its type before calling it.
2. Verify imports and exports if the value comes from another module.
3. Ensure the variable is assigned a function, not a string, object, or undefined.
4. Double‑check method names and this context, especially in class methods and callbacks.

The sections below show detailed scenarios with examples and solutions.

Scenario 1: Incorrect import or export (module functions)

One of the most common causes of “TypeError: is not a function” in TypeScript is incorrect import or export syntax. This usually happens when default and named exports are mixed up or when wildcard imports are used incorrectly.

Example: named export used with incorrect import

Consider a module userService.ts that exports a named function getUser:

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

Correct usage in app.ts:

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

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

I executed the above example code and added the screenshot below.

Now, if you accidentally use a wildcard import:

// app.ts
import * as getUser from "./userService";

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

Here, getUser is actually a module namespace object, not a function, so calling it causes the error.

Example: default export vs named import

Another frequent mistake is mismatching default and named exports.

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

Correct import:

// app.ts
import getUser from "./userService";

const user = getUser(1);

Incorrect import:

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

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

Here, { getUser } looks for a named export that does not exist, so the imported value is undefined at runtime.

How to fix incorrect imports/exports

• Check whether the module uses export (named) or export default.
• Use import { name } from “…” only for named exports.
• Use import name from “…” only for default exports.
• Avoid import * as something unless you intentionally need the entire typescript namespace object.

If you frequently hit this issue, standardize your module style: either mostly named exports or mostly default exports in a codebase, and enforce it with lint rules.

Scenario 2: Variable holds a non‑function value

Another common cause is assigning a non‑function value (string, object, etc.) to a variable that you later call as a function.

Example: using a broad type like Function or any

let fetchData: Function;

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

Because fetchData has a type of Function (or any), TypeScript does not complain at compile time. The error appears only at runtime.

Safer approach: use specific function types

Instead, declare a specific function type so TypeScript can catch incorrect assignments:

let fetchData: () => void;

// Correct assignment
fetchData = () => {
  console.log("Fetching data...");
};

fetchData(); // OK

If you now try to assign a string:

// This will cause a TypeScript compile-time error:
// Type '"This is not a function"' is not assignable to type '() => void'.
fetchData = "This is not a function" as any;

With a proper function type, TypeScript prevents the bug from reaching runtime, and you never see “is not a function” for this variable.

How to fix misassigned variables

• Replace broad types like Function or any with concrete function types, such as () => void, (id: number) => Promise<User>, or an interface describing the function.
• Review assignments to the problematic variable and ensure you always assign functions, not strings, objects, or other values.
• If the value comes from a configuration or API response, validate it before calling.

Scenario 3: Typo in method or property names (class methods)

Typographical errors in method names can also cause “is not a function” when the property you are trying to call does not exist.

Example: class method with a typo in the call

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

const userService = new UserService();

// Typo in method name
userService.getUserByID(1); // TypeError: userService.getUserByID is not a function

I executed the above example code and added the screenshot below.

In plain JavaScript, userService.getUserByID is undefined, so calling it throws “is not a function”.

How TypeScript can help

If you rely on TypeScript’s static typing, this mistake can be caught at compile time:

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

const userService = new UserService();

// In strict mode, this line will not compile:
// Property 'getUserByID' does not exist on type 'UserService'.
userService.getUserByID(1);

This shows the value of using proper types and avoiding any for objects that hold methods.

How to fix typos in method names

• Double‑check the method name in both the class definition and the call site.
• Enable strict mode in tsconfig.json and avoid any so TypeScript can locate these issues early.
• Use IDE features like auto‑complete and refactoring tools instead of manually typing method names everywhere.

Scenario 4: Calling methods with the wrong this context

In JavaScript and TypeScript, the this value inside a method depends on how the method is called. If you extract a method and call it as a plain function, this may be undefined or refer to the wrong object, which can cause runtime errors closely related to “is not a function”.

Example: method used as a callback without binding

class LocationService {
  location = "Los Angeles";

  getLocation() {
    return this.location;
  }
}

const locationService = new LocationService();

// Passing the method reference without binding `this`
function execute(callback: () => string) {
  return callback();
}

execute(locationService.getLocation as any);

Depending on the environment and strict mode, this can result in errors because this inside getLocation is not locationService. In more complex cases, this can lead to calling methods on undefined or treating non‑function values as functions.

Correct usage with bind or arrow functions

You can preserve the correct this context by using bind:

execute(locationService.getLocation.bind(locationService));

Or by wrapping the method call in an arrow function:

const boundGetLocation = () => locationService.getLocation();
execute(boundGetLocation);

How to fix these context issues

• Avoid passing bare method references as callbacks in class‑based code unless you bind them.
• Use arrow functions for instance methods when appropriate, since arrow functions capture this from the surrounding context.
• In React or other frameworks, prefer arrow function class properties or hooks that avoid confusion with this.

Bonus: React + TypeScript example (“is not a function” in props)

In React + TypeScript projects, a common place to see “is not a function” is when passing props that are expected to be functions but receive the wrong type.

Example: prop typed as a function

xtype SaveButtonProps = {
  onSave: () => void;
};

function SaveButton({ onSave }: SaveButtonProps) {
  return <button onClick={onSave}>Save</button>;
}

Correct usage:

x<SaveButton onSave={() => console.log("Saved")} />

Incorrect usage:

x// This will fail TypeScript type checking:
<SaveButton onSave="not a function" />;

With proper prop typing, TypeScript prevents non‑function values from being passed, which in turn prevents the runtime “is not a function” error on click.

How to debug “TypeError: is not a function” step by step

When this error appears in your console, use the following debugging checklist:

1. Log the value before calling it Before the line where the error occurs, add:tsconsole.log(“Value:”, maybeFunction); console.log(“Type of value:”, typeof maybeFunction);If typeof maybeFunction is "object", "string", "undefined", or "number", you immediately know why calling it fails.
2. Check where the value comes from
   • If it is imported from another module, double‑check the export and import syntax.
   • If it comes from props, state, or an API response, inspect those sources.
3. Narrow the TypeScript type Temporarily change the type from any or unknown to a specific function type:tslet maybeFunction: () => void;Then run tsc or your build. Any incorrect assignments will show up as compile‑time errors.
4. Create a minimal reproducible example Copy the relevant code into a small, isolated TypeScript file or a playground. Reduce it until you have the smallest snippet that still throws the error. Often, this makes the real cause obvious.
5. Search for similar patterns in the codebase Once you identify the cause (for example, a mis‑typed import), search for similar imports or patterns in the project and fix them in bulk.

This workflow is reusable and will help you debug not only “is not a function” errors but also many other runtime errors.

Best practices to avoid “is not a function” in TypeScript

To reduce the chance of ever seeing this error again, follow these best practices in your TypeScript projects:

• Prefer specific function types over Function or any.
  Use signatures like () => void, (id: number) => Promise<User>, or interfaces describing function shapes. This allows TypeScript to catch incorrect assignments.
• Avoid any for objects and functions.
  Use proper interfaces, types, and generics to describe values and methods, so the compiler can detect typos and wrong method calls.
• Enable strict mode in tsconfig.json.
  Options like strict, noImplicitAny, and strictNullChecks help catch missing properties and method name typos at compile time.
• Keep exports consistent.
  Decide on a convention (mostly named exports or mostly default exports) and enforce it across the project to reduce import mistakes.
• Use IDE features and refactoring tools.
  Let your editor auto‑complete method names and update them when you rename, instead of relying on manual typing.

Conclusion

“TypeError: is not a function” in TypeScript is always a runtime sign that something you are calling with () is not actually a function. Most of the time, it comes from a mismatch between how you expect a value to behave and what it really is at runtime, due to incorrect imports, misassigned variables, typos in method names, or this context issues.

By understanding common scenarios and following a structured debugging approach, you can quickly identify the root cause and prevent similar issues in the future by tightening your TypeScript types, standardizing imports, and relying on strict mode and IDE support.

You may also like to read:

• How to Ignore Lines in TypeScript?
•  Check and Print the Type of an Object in TypeScript
• Difference Between TypeScript .ts and .tsx Files
• Use of Any Type in TypeScript

Bijay Kumar

Bijay Kumar is an experienced Python and AI professional who enjoys helping developers learn modern technologies through practical tutorials and examples. His expertise includes Python development, Machine Learning, Artificial Intelligence, automation, and data analysis using libraries like Pandas, NumPy, TensorFlow, Matplotlib, SciPy, and Scikit-Learn. At PythonGuides.com, he shares in-depth guides designed for both beginners and experienced developers. More about us.

enjoysharepoint.com/