The Cannot invoke an object which is possibly undefined in TS error often occurs when coders invoke an undefined function property. So what is the problem? How to resolve it? Keep reading this article to get an overview of the error.

What Is The Cannot Invoke An Object Which Is Possibly Undefined Error?

As mentioned above, the error occurs when you invoke an undefined function property. This means your property is marked as optional:

type Employee = {

  doWork?: () => void;

};

const employee: Employee = {};

// ⛔️ Error: Cannot invoke an object which

// is possibly 'undefined'.ts(2722)

employee.doWork();

In this example, the doWork function is an optional property if you use a question mark. Overall, undefined is undoubtedly a falsy value, preventing you from reaching the code to the AND && operators’ right. The undefined employee.doWork is a prime example for it. 

How To Fix The Error: Cannot Invoke An Object Which Is Possibly Undefined

Now that you have understood the error fully and are looking for a possible solution. It is worth noting that the use of Partial<T> around the export type ButtonProps = Partial< AnchorButtonProps & NativeButtonProps> leads to the optional onClick. 

Besides, all the properties receiving the ? parameter will become optional and undefined. Two approaches as follows will help solve the error.

Approach 1: Optional onClick

The first method to fix this problem is to keep the ButtonProps the same as the onClick. It means they are optional. Your next task will be to ensure a defined onClick before calling it.

onst Button = (props: ButtonProps) => {

  const handleClick: React.MouseEventHandler<

    HTMLButtonElement | HTMLAnchorElement

  > = e => {

    if (props.onClick) props.onClick(e); // works

  };

};

Approach 2: Required onClick

Another method to fix the Cannot invoke an object which is possibly undefined in TS error is to make the onClick required by changing the ButtonProps. All you have to do is to fail to apply the Partial to the NativeButtonProps:

type ButtonProps1 = Partial<AnchorButtonProps> & NativeButtonProps;

const Button1 = (props: ButtonProps1) => {

  const handleClick: React.MouseEventHandler<

    HTMLButtonElement | HTMLAnchorElement

  > = e => {

    props.onClick(e); // works

  };

};

Now it’s time to define the type RequireKeys, which helps you specify required keys:

type RequireKeys<T, TNames extends keyof T> = T &

  { [P in keyof T]-?: P extends TNames ? T[P] : never };

type ButtonProps2 = RequireKeys<ButtonProps, "onClick">;

const Button2 = (props: ButtonProps2) => {

  const handleClick: React.MouseEventHandler<

    HTMLButtonElement | HTMLAnchorElement

  > = e => {

    props.onClick(e); // works

  };

};

Approach 3: Use The ? Operator

TypeScript can notify you of the undefined onBoundsChanged due to the optional ? property in the iMapProps interface. So it would be best to ensure a correct truthy value of this onBoundsChanged by the code as follows:

if(props.onBoundsChanged) onBoundsChanged(map)

Now use ?. option chaining operator to access to this:

props?.onBoundsChanged(map)

If the function is null or undefined, it will fail to call the function. Thus, after using the ? operator, don’t forget to get an optional function to resolve the problem.

Conclusion

The tutorial has discussed thoroughly the Cannot invoke an object which is possibly undefined in TS error. It also proposes some possible methods to resolve the problem. So read the article again to choose the best approach.