Cannot invoke an object which is possibly 'undefined' in TS

When working with TypeScript, you may encounter the error “Cannot invoke an object which is possibly ‘undefined'” when trying to invoke a function property that could be undefined, marked as optional. The error occurs because TypeScript wants to ensure that the property could not possibly have an undefined value, as trying to invoke undefined would cause a runtime error. In this article, we will explore several solutions to this error, including using the optional chaining operator (?.) and logical AND (&&) operator.

Understanding the Error

To better understand the error, let’s take a look at an example:

type Employee = {  doWork?: () => void;};const employee: Employee = {};// Error: Cannot invoke an object which// is possibly 'undefined'.ts(2722)employee.doWork();

In this example, we have defined an Employee type with an optional doWork function property. We then create an employee object, but do not assign the doWork property a value. When we try to invoke the doWork function, we get the “Cannot invoke an object which is possibly ‘undefined'” error.

Solution 1: Using the Optional Chaining Operator (?.)

One solution to this error is to use the optional chaining operator (?.) when invoking the function. The optional chaining operator short-circuits instead of throwing an error if the reference is undefined or null. Here’s how we can use it in our example:

type Employee = {  doWork?: () => void;};const employee: Employee = {};// Works nowemployee.doWork?.();

In this example, we use the ?. operator when invoking the doWork function. If the reference is equal to undefined or null, we will just short-circuit, returning undefined without causing any errors. On the other hand, if the function is defined, it will be invoked.

Solution 2: Using Logical AND (&&) Operator

Another solution is to use the logical AND (&&) operator to ensure that the property is not undefined before calling the function. Here’s how we can use it in our example:

type Employee = {  doWork?: () => void;};const employee: Employee = {};const result = employee.doWork && employee.doWork();

The logical AND (&&) operator returns the value to the right if the value to the left is truthy. Since undefined is a falsy value, we wouldn’t reach the code to the right of the logical AND (&&) operator if employee.doWork is undefined.

Example in React

This error is also common in React.js projects when passing props with functions that are marked as optional. Here’s an example of this error occurring in a React component:

type ButtonProps = {  onClick?: () => void;};function Button(props: ButtonProps) {  // Error: Cannot invoke an object  // which is possibly 'undefined'.ts(2722)  return <button onClick={() => props.onClick()}>Click me</button>;}

In this example, we have a Button component that takes a ButtonProps type as its props. The ButtonProps type has an optional onClick function property. When the button is clicked, we are trying to invoke the onClick function, but since it is marked as optional, it could be undefined, causing the “Cannot invoke an object which is possibly ‘undefined'” error.

To solve this error, we can use the same solutions we discussed earlier. Here’s an example of using the optional chaining operator (?.) to solve the error:

type ButtonProps = {  onClick?: () => void;};function Button(props: ButtonProps) {  // works now  return <button onClick={() => props.onClick?.()}>Click me</button>;}

Alternatively, we can also use the logical AND (&&) operator to ensure that the property is not undefined before calling the function:

type ButtonProps = {  onClick?: () => void;};function Button(props: ButtonProps) {  return <button onClick={() => props.onClick && props.onClick()}>Click me</button>;}

Conclusion on “Cannot invoke an object which is possibly ‘undefined’ in TS”

The “Cannot invoke an object which is possibly ‘undefined'” error occurs when we try to invoke a function property that could be undefined, e.g. is marked as optional. To solve the error, we can use the optional chaining operator (?.) or logical AND (&&) operator. Both of these solutions help ensure that the property is not undefined before calling the function, thus avoiding a runtime error.

In summary, “Cannot invoke an object which is possibly ‘undefined'” error occurs when we try to invoke a function property that could be undefined, which is marked as optional. And the solution is to use the optional chaining operator (?.) or logical AND (&&) operator to ensure the property is not undefined before calling the function.