What is the method to declare data types within the map function?

Question

What is the method to declare data types within the map function?

When retrieving data from a server, I receive an object that includes four arrays with different types of objects. I am attempting to map this data before subscribing to the observable so that I can properly utilize the classes in my frontend:

getData(){
    return this.http.get(this.authUrl + 'get/auf-data').pipe(
      map(({material, mat_auf, lokals, auf_analysen}) => {
        material.map(material => this.materialAdapter.adapt(material));
        mat_auf.map(auf => this.materialAufAdapter.adapt(auf));
        lokals.map(lokal => this.lokalAdapter.adapt(lokal));
        auf_analysen.map(analyse => this.aufAnalyseAdapter.adapt(analyse));
      })
    );
  }

Although the response is an object containing four different arrays, I am encountering the following error:

Property 'material' does not exist on type 'Object' (repeated for: mat_auf, lokals, and auf_analysen)

Is there a way to specify the data types in the map function to resolve this issue?

arrays angular typescript rxjs observable

Answer 1

Answer №1

The method for determining the response time is outlined as follows:

  fetchData() {
    return this.http.get<{ product: any, product_order: any, locations: any, order_analysis: any; }>('fetch/data').pipe(
      map(({ product, product_order, locations, order_analysis }) => {
        product.map(item => this.productAdapter.adapt(item));
        product_order.map(order => this.productOrderAdapter.adapt(order));
        locations.map(location => this.locationAdapter.adapt(location));
        order_analysis.map(analysis => this.orderAnalysisAdapter.adapt(analysis));
      })
    );
  }

If you investigate the type definitions within the httpClient, you will notice that one of the definitions for the get method contains:

 get<T>(url: string, options: {
        headers?: HttpHeaders | {
            [header: string]: string | string[];
        };
        observe: 'events';
        params?: HttpParams | {
            [param: string]: string | string[];
        };
        reportProgress?: boolean;
        responseType?: 'json';
        withCredentials?: boolean;
    }): Observable<HttpEvent<T>>;

Remember to replace any with the appropriate types when defining your response body.

Answer 2

The method for determining the response time is outlined as follows:

  fetchData() {
    return this.http.get<{ product: any, product_order: any, locations: any, order_analysis: any; }>('fetch/data').pipe(
      map(({ product, product_order, locations, order_analysis }) => {
        product.map(item => this.productAdapter.adapt(item));
        product_order.map(order => this.productOrderAdapter.adapt(order));
        locations.map(location => this.locationAdapter.adapt(location));
        order_analysis.map(analysis => this.orderAnalysisAdapter.adapt(analysis));
      })
    );
  }

If you investigate the type definitions within the httpClient, you will notice that one of the definitions for the get method contains:

 get<T>(url: string, options: {
        headers?: HttpHeaders | {
            [header: string]: string | string[];
        };
        observe: 'events';
        params?: HttpParams | {
            [param: string]: string | string[];
        };
        reportProgress?: boolean;
        responseType?: 'json';
        withCredentials?: boolean;
    }): Observable<HttpEvent<T>>;

Remember to replace any with the appropriate types when defining your response body.

What is the method to declare data types within the map function?

Answer №1

Similar questions

An iron-dropdown made of polymer featuring a trigger button made of paper-icon-button

Tips on applying a class to a host element using @hostbinding in Angular 2

Does anyone know why extend() and append() methods in Python return None instead of a value?

Configuring Typescript target and library to utilize Promise.allSettled on outdated web browsers

The Angular 2 Code Snippet extension created by Mads is experiencing issues within Visual Studio 2017

Emphasize a Row Based on a Certain Criteria

Tips for retrieving JSON files within karma tests

What is the best way to find out if an array index is within a certain distance of another index?

How can I utilize generic types in Typescript/React when crafting a component with prop types?

What is the process for updating nodemailer to integrate with https (SSL) connections?

Efficiently storing a newly shuffled list of tasks into the db.json file using Angular

Getting a multidimensional array from JSON in Typescript: A step-by-step guide

Using `publishReplay()` and `refCount()` in Angular does not behave as anticipated when dealing with subscriptions across multiple components

Using JavaScript, divide a string containing elements of unknown length that may be adjacent based on their type

Error: Failed to execute close function in inappbrowser for Ionic application

How can I confirm if a class is an instance of a function-defined class?

The for...of loop cannot be used with the .for property since it is not iterable. (Is

Design a TypeScript interface inspired by a set static array

Modifying Array Values in Angular 7

Exploring NestJs: The Importance of DTOs and Entities