Challenge with Typescript Interfaces

Question

Challenge with Typescript Interfaces

Can someone help me with understanding interfaces in typescript? I am currently facing an issue with the code.

The error message says: Type 'Response' is missing the following properties from type 'myObj': userId, title, id

I believe that the fetchDetails function should return a value of type Promise<myObj>, but since the type of data is Response, it is causing the error. I want to find a solution without adding any additional variables within the function. How can I make sure the required response is returned?

interface myObj {
  userId:number,
  title:string,
  id:string,
  body:string
}[]
 
async function fetchDetails(url:string):Promise<myObj>{
  let data:Response = await fetch(url);
  data = await data.json();
  return data;
}
fetchDetails('https://jsonplaceholder.typicode.com/posts')

typescript

Answer 1

Answer №1

Simply retrieve the information directly or give it a new variable name. It will look something like this:

interface fetchedData {
  userId:number,
  title:string,
  id:string,
  body:string
}[]
 
async function getData(url:string):Promise<fetchedData>{
  const response:Response = await fetch(url);
  info = await response.json();
  return info;
}
getData('https://jsonplaceholder.typicode.com/posts')

Answer 2

Simply retrieve the information directly or give it a new variable name. It will look something like this:

interface fetchedData {
  userId:number,
  title:string,
  id:string,
  body:string
}[]
 
async function getData(url:string):Promise<fetchedData>{
  const response:Response = await fetch(url);
  info = await response.json();
  return info;
}
getData('https://jsonplaceholder.typicode.com/posts')

Challenge with Typescript Interfaces

Answer №1

Similar questions

The technique for accessing nested key-value pairs in a JSON object within an Angular application

TypeScript and Redux mapDispatchToProps are not in sync

What is the process for launching a TypeScript VS Code extension from a locally cloned Git repository?

In Typescript, if at least one element in an array is not empty, the function should return false without utilizing iterators

Construct an outdated angular project from scratch

Exploring Typescript: A guide to iterating through a Nodelist of HTML elements and retrieving their values

7 Tips for Renaming Variables in VSCode without Using the Alias `oldName as newName` StrategyWould you like to

deliver a precise observable

Exploring TypeScript interfaces with optional properties and returning types

What makes fastify-plugin better than simply calling a regular function?

What is the best way to integrate @uirouter in the Angular/sampleapp project?

Has anyone tried integrating Reveal JS with Angular 8?

Having trouble retrieving values from radio buttons in Angular 2 forms

Troubleshooting notifications generated by react-hook-form and zod

Make sure to include a property that is indexed when typing

Turn off slider trace animation?

Error Encountered When Searching for Modules in a Yeoman-Generated Express TypeScript Project

Having trouble with [at-loader] while incorporating Typescript and react-bootstrap in webpack?

What is the best way to ensure that a class instance only receives the necessary properties?

Navigating through the key type within a mapped structure