Error in Angular 2/Typescript compilation: The property 'body' is not found on the type 'Response'

fetchVerificationCode(phoneNumber) {
        let endpoint = `${remote}/secure/verify/${phoneNumber}`;
        return this._http.get(endpoint)
            .toPromise()
            .then(data => {
               console.log(data.response);  <--- PROBLEM
            });
      }

When the code above is executed, it expects a property named response in the returned data. However, there is an issue raised by the typescript compiler:

Error TS2339: Property 'response' does not exist on type 'DataResponse'.

Trying to solve this, I attempted to define an interface like so:

interface DataResult<T> {
  response: string
}

and then implementing it as:

this.fetchVerificationCode('1111111') {
    let endpoint = `${remote}/secure/verify/${phoneNumber}`;
     return this._http.get(endpoint)
           .toPromise()
           .then( (data: DataResult<any> )=> {
                   console.log(data.response);  <--- PROBLEM
                });

However, this led to the error message:

Error TS2345: Argument of type '(data: DataResult<any>) => void' is not compatible with parameter of type '(value: DataResponse) => void | PromiseLike<void>'.
  Types 'data' and 'value' are not compatible.
    Type 'DataResponse' is missing the 'response' property found in type 'DataResult<any>'.

Answer №1

give this a shot

requestVerification(phoneNumber) {
    let endpoint = `${remote}/auth/phoneNumber/${phoneNumber}`;
    return this._http.get(endpoint)
        .toPromise()
        .then((response: Object) => {
           console.log(response.body);  <--- ISSUE
        });
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for modifying a static property in TypeScript

I am currently developing a class that wraps around a WebSocket to function as an ingestor. After successfully setting up the ingestion process and passing a function to the class instance for processing incoming messages, I encountered an issue. I need t ...

JavaScript: exporting everything from ... causing excessive bloat in the build file

After building my react-app with create-react-app, I noticed a decline in performance. Here is the structure of my project: /store actions.ts reducers.ts /module1 module1.actions.ts module1.reducers.ts /moduleN moduleN.actions.ts m ...

Discover the process of implementing Firebase Authentication in Deno Fresh!

I've been trying to set up authentication in Fresh using the official Firebase documentation, https://firebase.google.com/docs/auth but I can't seem to get it to work. Does anyone know of any other resources like docs, articles, or blogs that co ...

Unable to establish a connection between the HTML element and the TypeScript variable

I'm facing an issue with my code where the function that worked perfectly for register and login is not functioning properly on the index page. Even though there seems to be no errors in the login and register functions, I have a form with an input s ...

Struggling to successfully integrate the Clarity library into my Angular project using the command "ng add @clr/angular," encountering the error message "ERESOLVE unable to resolve dependency tree."

Currently, I am working on a project in Angular that requires the installation of the Clarity library using the command ng add @clr/angular. However, I am encountering an error related to compatibility: 0 verbose cli [ 0 verbose cli 'C:\\P ...

Guide on implementing conditional return types in React Query

In my approach, I have a method that dynamically uses either useQuery or useMutation based on the HTTP method passed as a prop. However, the return type of this method contains 'QueryObserverRefetchErrorResult<any, Error>', which lacks meth ...

How can you generate a distinct id value for each element within an ngFor iteration in Angular 4?

I encountered an issue where I must assign a distinct id value to each data row within my *ngFor loop in angular 4. Here is the code snippet: <div *ngFor="let row of myDataList"> <div id="thisNeedsToBeUnique">{{ row.myValue }}</div> & ...

Using an interpolated string as the title for Firebase Cloud Functions and Typescript: A beginner's guide

I need help with my cloud function to send notifications to a topic. My current setup uses an interpolated string for the topic: "topic": `Group: ${groupID}`, Unfortunately, every time the function is triggered, I encounter an error message: malformed top ...

The Authorization header in POST and PATCH fetch requests is stripped by Typescript

I have developed an API in C# that utilizes JWT tokens for authorization. On the frontend, I store these tokens in local storage and retrieve them when making a request. GET or DELETE requests work seamlessly, as I can verify through console.log() that t ...

Optimal JWT signature verification within express.js using jsonwebtoken

The code I'm working with looks like this: import jwt from 'jsonwebtoken'; import { Request, Response } from 'express'; import { JWT_EXPIRY, JWT_SECRET } from '../../config'; interface UserParams { username: string, ...

What are the steps for customizing the interface in TypeScript?

After fixing a type error related to adding custom functions to the gun chain by including bind():any within IGunChainReference in @types/gun/index.ts, I am wondering how to transfer this modification to one of my project files. I have not been able to fi ...

Definition of Angular 2 File

I have developed a custom Gantt chart library using D3 in vanilla JavaScript. Now, I am trying to integrate it into my Angular 2 application. After installing D3 via npm and adding the necessary type files and the Gantt chart module to node_modules, I enco ...

The asynchronous Angular *ngIf directive with multiple conditions on the same level is not functioning as expected

I am currently in the process of refactoring my code <ng-container *ngIf='taskOutputs$ | async as taskOutputs && taskOutputs.outputs.length; else neverImportedOrLoading'> I encountered an issue with Unexpected token &&, exp ...

Encountering TypeScript errors with React-Apollo when using GraphQL to pass props to a higher order component

I've encountered some challenges while attempting to link a React class component with my local Apollo cache data. Following the guidelines outlined here, I have run into issues where VSCode and Webpack are generating errors when I try to access data ...

What is the best way to fill the dropdown options in every row of a data table?

This HTML snippet displays a data table with test data and corresponding dropdown options. <tr> <th> Test Data </th> <th> Test Data ...

Using `reduce` in TypeScript, you can organize an array of objects based on a shared property

Here is an example of an array: [ { id: '1', task: 'Grocery shopping', isImportant: true }, { id: '2', task: 'Meeting', isImportant: false }, { id: '3', task: &apos ...

The correct way to assign a value within an Angular Observable subscribe function

Having some trouble with a basic form using @angular/material (although the material aspect shouldn't make a difference) that is structured like this: <div *ngIf="user"> <form> <mat-form-field> <m ...

When using the `const { }` syntax, which attribute is made accessible to the external

I am using the ngrx store as a reference by following this example: https://stackblitz.com/edit/angular-multiple-entities-in-same-state?file=src%2Fapp%2Fstate%2Freducers%2Fexample.reducer.ts Within the code in example.reducer.ts, there is this snippet: ...

Is it possible to showcase a variety of values in mat-select?

Is it possible to pass different values to the .ts file in each function? For example, can I emit a String with (selectionChange)="onChangeLogr($event)" and an object with (onSelectionChange)="onChangeLogr_($event)"? How would I go about doing this? ...

Sending template reference from one Angular component to another

I have a main grid component that includes smaller grid-item components. The majority of these grid items navigate to a specific route when clicked. However, there is one particular item that should open a modal window instead of navigating. Is there a wa ...