How to fix Cannot invoke an object which is possibly 'null' in TypeScript

TypeScriptINTERMEDIATEMEDIUMUpdated Dec 8, 2025· 159 views

This TypeScript error occurs when you try to call a function that might be null or undefined without checking first. Enable strict null checks in tsconfig.json and use optional chaining (?.), null checks, or type assertions to safely invoke functions.

Quick fix

Fixes TS2722

{
  "compilerOptions": {
    "strictNullChecks": true
  }
}
  1. Enable strictNullChecks in tsconfig.json
  2. Use optional chaining (?.) to safely invoke functions
  3. Use null checks (if statements) before invoking
  4. Use the logical AND operator (&&)
typescript — error
{
  "compilerOptions": {
    "strictNullChecks": true
  }
}
Cannot invoke an object which is possibly 'null'

What this error means

When TypeScript's `strictNullChecks` compiler option is enabled, variables are not automatically assumed to allow `null` or `undefined` values. If you declare a variable as possibly null (like `function | null`), TypeScript won't let you invoke it without first verifying it's not null. This error prevents a common runtime bug: trying to call a function that doesn't exist. It's a type safety feature that catches mistakes at compile time rather than failing at runtime with "Cannot read property of null." The error typically appears when: - A function parameter might be undefined - An API returns data that could be null - You're accessing a property that might not exist - You're working with optional callback functions

Typical symptoms

  • TypeScript compilation fails with error TS2722
  • Error message mentions 'possibly null' or 'possibly undefined'
  • The error occurs at a function call site (with parentheses)
  • Everything works fine at runtime but TypeScript won't compile
  • Error appears when using function parameters with union types
  • Callback functions with optional types trigger this error

Common causes

  1. Calling a function that has type 'Function | null' or 'Function | undefined'
  2. strictNullChecks is enabled in tsconfig.json (correct behavior, not a bug)
  3. Function parameter is optional but you're not checking before invoking
  4. API returns data typed as 'function | null' and you're not verifying
  5. Destructuring assignment didn't narrow the type to exclude null
  6. Using a variable without validating it exists first

How to fix "Cannot invoke an object which is possibly 'null'"

1Enable strictNullChecks in tsconfig.json

First, ensure strict null checks are enabled in your TypeScript configuration:

json
{
  "compilerOptions": {
    "strictNullChecks": true
  }
}

Or use the strict flag which enables all strict type-checking options:

json
{
  "compilerOptions": {
    "strict": true
  }
}

This is the recommended configuration for all TypeScript projects.

2Use optional chaining (?.) to safely invoke functions

The cleanest modern solution is the optional chaining operator. It safely calls the function only if it's not null or undefined:

typescript
// ❌ Error: Object is possibly 'null'
const result = myFunction();

// ✅ Safe: Uses optional chaining
const result = myFunction?.();

// Example with object methods
type Employee = { doWork?: () => void };
const employee: Employee = {};

// ✅ Safely calls doWork if it exists
employee.doWork?.();

If the function is null, the expression short-circuits and returns undefined instead of throwing an error.

3Use null checks (if statements) before invoking

Check that the function exists before calling it:

typescript
const callback: (() => void) | null = getCallback();

// ✅ Check before invoking
if (callback) {
  callback();
}

// ✅ Alternative with !== null
if (callback !== null) {
  callback();
}

// ✅ Alternative with typeof check
if (typeof callback === 'function') {
  callback();
}

This approach is explicit and clear about the intent.

4Use the logical AND operator (&&)

The && operator short-circuits if the left side is falsy:

typescript
const callback: (() => void) | null = getCallback();

// ✅ Calls callback only if it's not null/undefined
callback && callback();

// ✅ With arrow function
const result = callback && callback();

This is more concise but slightly less readable than an explicit if statement.

5Use the non-null assertion operator (!) carefully

If you're certain a value is not null, you can use the ! assertion:

typescript
const callback: (() => void) | null = getCallback();

// ⚠️ Assert that callback is not null
callback!();

WARNING: This bypasses TypeScript's type safety. Only use when you're absolutely certain the value is not null at runtime. If you're wrong, you'll get a runtime error.

Better approach: Fix the type or add a proper check instead of using !.

6Type the function parameter correctly

If you're receiving a callback function parameter, type it properly:

typescript
// ❌ Bad: Allowing null in the parameter
function process(callback: (() => void) | null) {
  callback?.();
}

// ✅ Better: Make callback required
function process(callback: () => void) {
  callback();
}

// ✅ Or use optional syntax if it's actually optional
function process(callback?: () => void) {
  callback?.();
}

The difference: callback: Function | null vs callback?: Function (optional parameter).

Advanced notes

### Optional vs Nullable Parameters

There's an important distinction:

typescript
// ❌ Parameter is required but value can be null
function a(fn: (() => void) | null) { }

// ✅ Parameter is optional, if provided can't be null
function b(fn?: () => void) { }

// ✅ Parameter is required and can't be null
function c(fn: () => void) { }

Use optional parameters (fn?: ...) when the function doesn't need to be provided. Use | null only when you specifically need to pass null as a value.

### strictNullChecks vs Non-Strict Mode

Without strictNullChecks, TypeScript ignores null/undefined in types, allowing these calls without errors. However, this defeats the purpose of using TypeScript—you lose compile-time safety.

Always enable strictNullChecks. Every major TypeScript project uses it.

### React useCallback Example

A common pattern in React:

typescript
import { useCallback } from 'react';

interface Props {
  onSuccess?: (data: string) => void;
}

function MyComponent({ onSuccess }: Props) {
  const handleClick = useCallback(() => {
    // ❌ Error: onSuccess is possibly undefined
    onSuccess('done');

    // ✅ Safe with optional chaining
    onSuccess?.('done');

    // ✅ Or check first
    if (onSuccess) {
      onSuccess('done');
    }
  }, [onSuccess]);

  return <button onClick={handleClick}>Click me</button>;
}

### Filtering null from arrays

When working with arrays of possibly-null functions:

typescript
const callbacks: ((() => void) | null)[] = [fn1, null, fn2];

// ✅ Use filter to remove nulls
callbacks.filter((cb) => cb !== null).forEach((cb) => cb());

// ✅ Or use optional chaining on each
callbacks.forEach((cb) => cb?.());

Frequently asked questions

What does "TS2722" mean?
When TypeScript's strictNullChecks compiler option is enabled, variables are not automatically assumed to allow null or undefined values. If you declare a variable as possibly null (like function | null), TypeScript won't let you invoke it without first verifying it's not null. This error prevents a common runtime bug: trying to call a function that doesn't exist.
How do I fix "TS2722"?
This TypeScript error occurs when you try to call a function that might be null or undefined without checking first. Enable strict null checks in tsconfig.json and use optional chaining (?.), null checks, or type assertions to safely invoke functions.
What causes "TS2722"?
Calling a function that has type 'Function | null' or 'Function | undefined' strictNullChecks is enabled in tsconfig.json (correct behavior, not a bug) Function parameter is optional but you're not checking before invoking
Is the "TS2722" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading