Using Angular's promise feature can alter the definition of an interface

Question

Using Angular's promise feature can alter the definition of an interface

Within a predefined interface, I have the following properties:

export interface User {
  userID : number;
  userName : string;
  userAge : string;
}

In addition, there is a service that retrieves dummy data from a mock REST API.

getUsers(){
    return this.http.get("https://fakerestapi.azurewebsites.net/api/Authors").toPromise();
  }

Within my component, I consume this service and transform the data into a list of users using the code below:

 _service.getUsers().then(i => { this.userList = i as User[]; console.log(this.userList) });

It's worth noting that I utilize 'AS' to convert the response into my specific user[] array.

CONCERN:
The dummy REST API returns the following data:

{
    "ID": 1,
    "IDBook": 1,
    "FirstName": "First Name 1",
    "LastName": "Last Name 1"
  }

The User class does not include properties like ID or IDBook. Surprisingly, when checking the console, it automatically adjusts the definition of the User class and displays all the data even if the properties do not match.

Link:https://stackblitz.com/edit/angular-pryy3f?file=src%2Fapp%2Fappservice.service.ts

In my opinion, only matching properties should be displayed, not all of them.

angular typescript interface angular6

Answer 1

Answer №1

When it comes to typescript, the as keyword serves as a type assertion rather than type casting. Here is what is happening:

You request a User[]
You receive a JSON object[]
The JSON object[] gets transformed into an array of User's interface (refer to what an interface means in TypeScript)
The compiler accepts this.userList as a User[], but keep in mind it's just a type assertion

Hence, using the as keyword appears redundant and pointless in this scenario.

A type assertion proves useful for features like autocompletion that are handled during compilation. Nonetheless, it does not equate to an actual cast. Therefore, when you run your code, this.userList will always be a JSON Object[].

If you genuinely require User objects, consider implementing something along these lines:

_service.getUsers().then(i => { 
    this.userList = i.map(u => new User(u)); 
    console.log(this.userList) 
});

Duly note that you need to set up a constructor within your User class.

EDIT

Upon reviewing your Authors file, I noticed you utilize an XML syntax that converts into an array treated as an Object. Consequently, the map operation encounters issues. I have made some modifications to your code.

User

export class User {
  userID: number;
  FirstName: string;
  userAge: string;

  constructor()
  constructor(u: User)
  constructor(u?: User) {
     this.userID = u && u.userID || -1;
     this.FirstName = u && u.FirstName || '';
     this.userAge = u && u.userAge || '';
  }

  clone(): User {
    // TO-DO CLONE USER
    return new User();
  }
}

AppComponent

import { Component } from '@angular/core';
import { AppserviceService } from './appservice.service';
import { User } from './user';
import 'rxjs/add/operator/map';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private userList: User[] = [];
  constructor(private _service: AppserviceService) {
    _service.getUsers().then(i => {  
      for (let c=0; c<10; c++) {
        let u = new User(i[c]);
        this.userList.push(u);
      }

      console.log('this.userList', this.userList);
    });
  }
}

Answer 2

When it comes to typescript, the as keyword serves as a type assertion rather than type casting. Here is what is happening:

You request a User[]
You receive a JSON object[]
The JSON object[] gets transformed into an array of User's interface (refer to what an interface means in TypeScript)
The compiler accepts this.userList as a User[], but keep in mind it's just a type assertion

Hence, using the as keyword appears redundant and pointless in this scenario.

A type assertion proves useful for features like autocompletion that are handled during compilation. Nonetheless, it does not equate to an actual cast. Therefore, when you run your code, this.userList will always be a JSON Object[].

If you genuinely require User objects, consider implementing something along these lines:

_service.getUsers().then(i => { 
    this.userList = i.map(u => new User(u)); 
    console.log(this.userList) 
});

Duly note that you need to set up a constructor within your User class.

EDIT

Upon reviewing your Authors file, I noticed you utilize an XML syntax that converts into an array treated as an Object. Consequently, the map operation encounters issues. I have made some modifications to your code.

User

export class User {
  userID: number;
  FirstName: string;
  userAge: string;

  constructor()
  constructor(u: User)
  constructor(u?: User) {
     this.userID = u && u.userID || -1;
     this.FirstName = u && u.FirstName || '';
     this.userAge = u && u.userAge || '';
  }

  clone(): User {
    // TO-DO CLONE USER
    return new User();
  }
}

AppComponent

import { Component } from '@angular/core';
import { AppserviceService } from './appservice.service';
import { User } from './user';
import 'rxjs/add/operator/map';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private userList: User[] = [];
  constructor(private _service: AppserviceService) {
    _service.getUsers().then(i => {  
      for (let c=0; c<10; c++) {
        let u = new User(i[c]);
        this.userList.push(u);
      }

      console.log('this.userList', this.userList);
    });
  }
}

Answer 3

Answer №2

Creating an interface in Typescript does not impact the resulting Javascript code, as interfaces are not recognized in Javascript. To better understand this concept, try experimenting with the Typescript playground. Interfaces serve as tools for developers to catch errors during compilation.

Therefore, when returning an object from an HTTP request, it will remain unchanged regardless of any interfaces applied to it, since Javascript does not recognize interfaces or type casting.

Answer 4

Creating an interface in Typescript does not impact the resulting Javascript code, as interfaces are not recognized in Javascript. To better understand this concept, try experimenting with the Typescript playground. Interfaces serve as tools for developers to catch errors during compilation.

Therefore, when returning an object from an HTTP request, it will remain unchanged regardless of any interfaces applied to it, since Javascript does not recognize interfaces or type casting.

Using Angular's promise feature can alter the definition of an interface

Answer №1

Answer №2

Similar questions

Issue with locating module 'swiper_angular' during Jest unit testing following upgrade from Swiper 6 to 7

Encountering an issue when attempting to convert data to JSON in Angular 13, as the content type 'text/plain;charset=UTF-8' is not supported. This problem arises after sending data from

There is no property called 'x' in type 'y'

Guide on inputting Vue component in props

How can I detect when the Redux state object in my Angular (v5) application changes?

Combining multiple Observables and storing them in an array using TypeScript

Unable to transfer an object into a component due to a subscribe restriction

The map function is calling an unresolved function or method named "map"

Struggling to access the properties of a Material-UI Button

Ways to specify the type signature for objects that incorporate a fresh method

What is the process of substituting types in typescript?

Tips on transferring a child Interface to a parent class

Ways to extract X-Total-Count from json-server using Angular's http.get function

Creating an RxJS subject in Angular 2: A step-by-step guide

What is the proper way to declare a Type for a JSX attribute in Google AMP that utilizes square brackets?

Using [(ngModel)] on a field within an object that is nested inside another object

What is the best approach for resolving this asynchronous task sequencing issue in JavaScript?

"Upon the initial page load, the persistence of values in local storage using Next.js, React, and Recoil

What are some ways to implement Material UI's Chip array to function similar to an Angular Chip Input?

Angular Form Template Unidirectional Data Binding Example