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

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

The Cannot invoke an object which is presumably undefined in TS error usually happens when coders invoke an undefined operate property. So what’s the drawback? How to resolve it? Keep studying this text to get an outline of the error.

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

As talked about above, the error happens if you invoke an undefined operate property. This means your property is marked as non-obligatory:

sort Employee = {

  doWork?: () => void;

};

const worker: Employee = {};

// ⛔️ Error: Cannot invoke an object which

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

worker.doWork();

In this instance, the doWork operate is an non-obligatory property in case you use a query mark. Overall, undefined is undoubtedly a falsy worth, stopping you from reaching the code to the AND && operators’ proper. The undefined worker.doWork is a first-rate instance for it.

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

Now that you’ve understood the error totally and are in search of a potential resolution. It is price noting that the usage of Partial<T> across the export sort ButtonProps = Partial< AnchorButtonProps & NativeButtonProps> results in the non-obligatory onClick.

Besides, all of the properties receiving the ? parameter will change into non-obligatory and undefined. Two approaches as follows will assist remedy the error.

READ :  Upgrading node version throws node-sass error when trying to build

Approach 1: Optional onClick

The first methodology to repair this drawback is to maintain the ButtonProps the identical because the onClick. It means they’re non-obligatory. Your subsequent activity will likely be to make sure an outlined onClick earlier than calling it.

onst Button = (props: ButtonProps) => {

  const handleClick: React.MouseEventHandler<

    HTMLButtonFactor | HTMLAnchorElement

  > = e => {

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

  };

};

Approach 2: Required onClick

Another methodology to repair the Cannot invoke an object which is presumably undefined in TS error is to make the onClick required by altering the ButtonProps. All you must do is to fail to use the Partial to the NativeButtonProps:

sort ButtonProps1 = Partial<AnchorButtonProps> & NativeButtonProps;

const Button1 = (props: ButtonProps1) => {

  const handleClick: React.MouseEventHandler<

    HTMLButtonFactor | HTMLAnchorElement

  > = e => {

    props.onClick(e); // works

  };

};

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

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

  { [P in keyof T]-?: P extends TNames ? T[P] : by no means };

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

const Button2 = (props: ButtonProps2) => {

  const handleClick: React.MouseEventHandler<

    HTMLButtonFactor | HTMLAnchorElement

  > = e => {

    props.onClick(e); // works

  };

};

Approach 3: Use The ? Operator

TypeScript can notify you of the undefined onBoundsChanged as a result of non-obligatory ? property within the iMapProps interface. So it will be finest to make sure an accurate truthy worth of this onBoundsChanged by the code as follows:

if(props.onBoundsChanged) onBoundsChanged(map)

Now use ?. possibility chaining operator to entry to this:

props?.onBoundsChanged(map)

If the operate is null or undefined, it would fail to name the operate. Thus, after utilizing the ? operator, don’t overlook to get an non-obligatory operate to resolve the issue.

READ :  The token ‘&&’ is not a valid statement separator in this version

Conclusion

The tutorial has mentioned totally the Cannot invoke an object which is presumably undefined in TS error. It additionally proposes some potential strategies to resolve the issue. So learn the article once more to decide on one of the best method.

Leave a Reply

Your email address will not be published. Required fields are marked *