Ways to input standard fetch() outcome

Question

Ways to input standard fetch() outcome

type Task = {
  name: string
  category: string
  duration: number
  cost: number
  website: string
  identifier: string
  availability: number
}

async function retrieveOne(): Promise<Task> {
  const apiUrl = "https://www.boredapi.com/api/activity"
  const response: Task = await fetch(apiUrl).then(response => (response.json()))
  // Encountered issue with unsafe assignment of an `any` value.eslint@typescript-eslint/no-unsafe-assignment
  // Any recommendations on how to resolve this?
  return response
}

I received :

Encountered issue with unsafe assignment of an any value.eslint@typescript-eslint/no-unsafe-assignment

Any suggestions on how to rectify this?

typescript eslint

Answer 1

Answer №1

Any ideas on how to resolve this issue?

Unfortunately, there is no straightforward solution.

When dealing with dynamic data in operations over the wire, the return type is inherently unpredictable at compile-time. It's impossible to statically determine that. Ideally, the return type of response.json() should be unknown.

The best approach with dynamic data is to implement runtime checks to validate it against the desired schema and then transform the data into type-safe structures:

type Thing = {
  a: string
  b: number
}

async function getTheThing(): Promise<Thing> {
  const resp = await fetch('someurl');
  const data: unknown = resp.json();
  if (typeof data === 'object' && data && 'a' in data && 'b' in data && typeof data.a === 'string' && typeof data.b === 'number') {
    return {
      a: data.a,
      b: data.b
    }
  }

  throw new Error('invalid data!')
}

Playground

Notice that the compiler validates this code without any unsafe casts. Also, consider organizing the conditional logic into a user-defined type predicate for enhanced usability.

Answer 2

Any ideas on how to resolve this issue?

Unfortunately, there is no straightforward solution.

When dealing with dynamic data in operations over the wire, the return type is inherently unpredictable at compile-time. It's impossible to statically determine that. Ideally, the return type of response.json() should be unknown.

The best approach with dynamic data is to implement runtime checks to validate it against the desired schema and then transform the data into type-safe structures:

type Thing = {
  a: string
  b: number
}

async function getTheThing(): Promise<Thing> {
  const resp = await fetch('someurl');
  const data: unknown = resp.json();
  if (typeof data === 'object' && data && 'a' in data && 'b' in data && typeof data.a === 'string' && typeof data.b === 'number') {
    return {
      a: data.a,
      b: data.b
    }
  }

  throw new Error('invalid data!')
}

Playground

Notice that the compiler validates this code without any unsafe casts. Also, consider organizing the conditional logic into a user-defined type predicate for enhanced usability.

Ways to input standard fetch() outcome

Answer №1

Similar questions

Exploring an object property in Angular 8 through iteration

Modifying the title of a dynamically generated element with a Vuex mutation

Tips for troubleshooting a Typescript application built with Angular 2

Accessing base class properties in Typescript: A comprehensive guide

Instantiate a child class within an abstract class by utilizing the keyword "this"

Tips for displaying backend error messages on the frontend

The performance of web API calls on an Angular 7 app deteriorates gradually with each subsequent call

How to submit a form in Angular2 without reloading the page

The button event listener in React fails to trigger without a page refresh

Create an array with individual key-type pairs for each generic element, then iterate through the array

Jasmine reported that there were no specifications found in the Angular project written in TypeScript

Typescript: Implementing the 'types' property in a function returned from React.forwardRef

Application: The initialization event in the electron app is not being triggered

Using React, TypeScript, and Next.js to transform all elements in a static array to their last occurrence

Angular Tip: How to Trim the Last 4 Characters from a Bound [ngValue] String

Error message TS2304: Unable to locate the variable 'title' in vite (vue) + typescript environment

Having trouble creating a unit test for exporting to CSV in Angular

Excluding node modules when not included in tsconfig

"Encountered a problem when trying to access properties within a

It’s not possible for Typescript to reach an exported function in a different module