What could be causing the TypeScript type error within this Effector effect subscriber?

Question

What could be causing the TypeScript type error within this Effector effect subscriber?

Working on a front-end application utilizing React, Typescript, Effector, FetchAPI, and other technologies. Created an Effector effect to delete an item in the backend:

export const deleteItemFX = createEffect({
  handler: (id: string) => {
    return fetch(itemUrl + id, {
      method: "DELETE",
    });
  }
})

Now, when trying to utilize this effect in my React component by subscribing to its 'finally' event according to the official documentation:

deleteItemFX.finally.watch(({params, status, result}) => {
    console.log('finally.watch called');
    if (result.ok) {
      result.json().then(() => {
        message.success(t("delete_item.success"));
      })
    }
  });

Encountering a type error during compilation:

Property 'result' does not exist on type '{ status: "done"; params: string; result: Response; } | { status: "fail"; params: string; error: Error; }'.  TS2339

Seeking advice or suggestions on how to access the 'result' of the handler within the 'finally.watch' function.

typescript typeerror typescript-typings effector

Answer 1

Answer №1

The issue arises when you attempt to extract the property result while destructuring the argument for watch, without first verifying whether status is equal to "done" or "fail".

Take a look at the error message: it states that the property result does not exist within the type:

{ status: "done"; params: string; result: Response; }
| { status: "fail"; params: string; error: Error; }

This represents a union of two object types; in order to access a property from a union, that property must be present on both sides of the union. In this case, result exists only in the first scenario, not the second one. Therefore, prior to reading it, ensure that the data corresponds to the first scenario by utilizing an if statement to refine the type:

deleteItemFX.finally.watch(response => {
    console.log('finally.watch called');
    if (response.status === "fail") {
        // Handle any errors here. TypeScript recognizes that we are in the
        // second part of the union type, so response.error
        // can be accessed within this block
        return;
    }

    // At this point, TypeScript identifies that we are in the first part of the union,
    // and that the property response.result exists, allowing us to access it
    if (response.result.ok) {
      result.json().then(() => {
        message.success(t("delete_item.success"));
      })
    }
  });

Answer 2

The issue arises when you attempt to extract the property result while destructuring the argument for watch, without first verifying whether status is equal to "done" or "fail".

Take a look at the error message: it states that the property result does not exist within the type:

{ status: "done"; params: string; result: Response; }
| { status: "fail"; params: string; error: Error; }

This represents a union of two object types; in order to access a property from a union, that property must be present on both sides of the union. In this case, result exists only in the first scenario, not the second one. Therefore, prior to reading it, ensure that the data corresponds to the first scenario by utilizing an if statement to refine the type:

deleteItemFX.finally.watch(response => {
    console.log('finally.watch called');
    if (response.status === "fail") {
        // Handle any errors here. TypeScript recognizes that we are in the
        // second part of the union type, so response.error
        // can be accessed within this block
        return;
    }

    // At this point, TypeScript identifies that we are in the first part of the union,
    // and that the property response.result exists, allowing us to access it
    if (response.result.ok) {
      result.json().then(() => {
        message.success(t("delete_item.success"));
      })
    }
  });

What could be causing the TypeScript type error within this Effector effect subscriber?

Answer №1

Similar questions

TS2786 TypeScript is failing to recognize the UI-Kitten components

The type 'string' does not share any properties with the type 'CSSProperties'

Executing an AngularJS function using regular JavaScript code

Is the autoIncrement property missing from the IDBObjectStore Interface in Typescript 1.8 lib.d.ts file?

Fixing TypeError in React App: How to Resolve the "Cannot read property 'prototype' of undefined" Issue

Unlocking the Power of Typescript and ReactJS: Maximizing Efficiency with Previous State

Utilizing React-hook-Form to transfer data between two SelectBoxes

Incorrect date generated by Moment.js from Unix timestamp

Validating Forms in TypeScript

Using class variance authority variants allows for the acceptance of a "null" value, although it is not recommended

Configuring NextJs routes with multiple parameters

Vue defineProps allows for the definition of complex types for properties

A programming element that is capable of accessing a data member, but mandates the use of a setter method for modifications

What is the best way to create an instance method in a subclass that can also call a different instance method?

When the button onClick event is not functioning as expected in NextJS with TypeScript

Implementing a onClick event to change the color of individual icons in a group using Angular

Error: The property you are trying to set is undefined and cannot

What causes the error "property does not exist on type" when using object destructuring?

What is the best way to filter specific data types when using ngFor in Angular?

Mapping object array values to the same key in Angular is a common task that can