Seeking assistance in addressing a TypeScript error related to typecasting in Angular 9

Question

Seeking assistance in addressing a TypeScript error related to typecasting in Angular 9

After updating Angular from version 4 to 9, I have encountered some errors that I am struggling to resolve.

Here is a snippet of my code:

this.getTrades().then((trades) => {
    console.log(trades);
    this.trades = new MatTableDataSource<Trade>(trades);
});

getTrades() {
    let promise = new Promise((resolve, reject) => {
        this.dataService.getTrades().subscribe((trades) => {
            resolve(trades);
        });
    });
    return promise;
}

export interface Trade {
    ID: number;
    UserID: number;
    DateTime: Date;
    Exchange: Exchange;
    BaseCoin: Coin;
    MarketCoin: MarketCoin;
    Price: number;
    Amount: number;
    Total: number;
    Last: number;
    Type: Type;
    Status: Status;
    Symbol: string;
}

The function getTrades() uses the following data source:

getTrades() {

    return this.http.get('http://localhost:8888/currencytracker-api/json/get-trades.php').pipe(
    map(res => res.json()));

}

It retrieves a JSON array with the specified data fields.

This is the error message I am encountering:

ERROR in src/app/components/trades/trades.component.ts:100:68 - error TS2345: Argument of type 'unknown' is not assignable to parameter of type 'Trade[]'. Type '{}' is missing the following properties from type 'Trade[]': length, pop, push, concat, and 26 more.

this.trades = new MatTableDataSource(trades);

If anyone can help me understand this error and how to fix it, I would greatly appreciate it. Thank you.

Update:

I initially declared the trades variable as:

Trade[]

However, I have now declared it as:

MatTableDataSource<Trade>

angular typescript casting

Answer 1

Answer №1

Subscribing inside a Promise callback is not considered best practice. This can potentially result in memory leaks.

If you find yourself needing to change an Observable into a Promise, you can utilize toPromise().

Consider enforcing strong typing on the getTrades() method:

getTrades(): Promise<Trade[]> {
    return this.dataService.getTrades().toPromise()      
}

Answer 2

Subscribing inside a Promise callback is not considered best practice. This can potentially result in memory leaks.

If you find yourself needing to change an Observable into a Promise, you can utilize toPromise().

Consider enforcing strong typing on the getTrades() method:

getTrades(): Promise<Trade[]> {
    return this.dataService.getTrades().toPromise()      
}

Answer 3

Answer №2

You should provide more explicit information about the types:

Start by using the most suitable overload of HttpClient.get that requires a generic parameter and interprets the body as JSON.

This particular overload constructs a GET request, interpreting the body as a JSON object and returning the response body in a specified type.

getTrades(): Observable<Trade[]> {
    return this.http.get<Trade[]>( 'http://localhost:8888/currencytracker-api/json/get-trades.php' );
}

Next, add explicit types to the getTrades() function:

getTrades(): Promise<Trade[]> {
    const promise = new Promise<Trade[]>( ( resolve, reject ) => {
      this.dataSource.getTrades().subscribe( ( trades ) => {
        resolve( trades );
      });
    });
    return promise;
  }

Instead of converting to a promise, consider subscribing directly to the Observable returned by the dataSource for better efficiency:

this.dataSource.getTrades().subscribe( ( trades ) => {
    console.log( trades );
    this.trades = new MatTableDataSource<Trade>( trades );
});

Update:

Make sure you are using HttpClient from @angular/common/http, not from @angular/core. The @angular/http package has been deprecated with Angular 8 in favor of @angular/common/http.

https://www.npmjs.com/package/@angular/http

The package is no longer supported. Instead, use @angular/common, as mentioned in https://angular.io/guide/deprecations#angularhttp

Update 2: The issues you faced with assignment indicate that it was always incorrect. MatTableDataSource<Trade> is not equivalent to Trade[]

I suspect the reason why it worked in your old project is due to TypeScript 2.x. In TypeScript 3.x, getTrades() without explicit typing is inferred as Promise<unknown> instead of Promise<any>.

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#new-unknown-top-type

TypeScript 3.0 introduces a new top type called unknown. It serves as a type-safe alternative to any. While anything can be assigned to unknown, unknown itself can only be assigned to itself or another variable without any type assertions or narrowing based on control flow. Furthermore, operations on an unknown type require asserting or narrowing to a more specific type first.

Answer 4

You should provide more explicit information about the types:

Start by using the most suitable overload of HttpClient.get that requires a generic parameter and interprets the body as JSON.

This particular overload constructs a GET request, interpreting the body as a JSON object and returning the response body in a specified type.

getTrades(): Observable<Trade[]> {
    return this.http.get<Trade[]>( 'http://localhost:8888/currencytracker-api/json/get-trades.php' );
}

Next, add explicit types to the getTrades() function:

getTrades(): Promise<Trade[]> {
    const promise = new Promise<Trade[]>( ( resolve, reject ) => {
      this.dataSource.getTrades().subscribe( ( trades ) => {
        resolve( trades );
      });
    });
    return promise;
  }

Instead of converting to a promise, consider subscribing directly to the Observable returned by the dataSource for better efficiency:

this.dataSource.getTrades().subscribe( ( trades ) => {
    console.log( trades );
    this.trades = new MatTableDataSource<Trade>( trades );
});

Update:

Make sure you are using HttpClient from @angular/common/http, not from @angular/core. The @angular/http package has been deprecated with Angular 8 in favor of @angular/common/http.

https://www.npmjs.com/package/@angular/http

The package is no longer supported. Instead, use @angular/common, as mentioned in https://angular.io/guide/deprecations#angularhttp

Update 2: The issues you faced with assignment indicate that it was always incorrect. MatTableDataSource<Trade> is not equivalent to Trade[]

I suspect the reason why it worked in your old project is due to TypeScript 2.x. In TypeScript 3.x, getTrades() without explicit typing is inferred as Promise<unknown> instead of Promise<any>.

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#new-unknown-top-type

TypeScript 3.0 introduces a new top type called unknown. It serves as a type-safe alternative to any. While anything can be assigned to unknown, unknown itself can only be assigned to itself or another variable without any type assertions or narrowing based on control flow. Furthermore, operations on an unknown type require asserting or narrowing to a more specific type first.

Seeking assistance in addressing a TypeScript error related to typecasting in Angular 9

Answer №1

Answer №2

Similar questions

Creating REST API Endpoint using Angular

What sets apart ViewProviders from Services in Angular2?

Filtering JSON data with Angular 4 input range feature

Is there a way to utilize enums containing dashes in GraphQl JS?

How to update an Array<Object> State in ReactJS without causing mutation

deliver a promise with a function's value

Error message: "ExpressionChangedAfterItHasBeenCheckedError - encountered while using ngIf directive to hide/show a progress

Dynamically add functionality to base instance through derived class during execution

To display a specific router link and its child routes, make use of the *ngIf directive

Link Array Element to [(value)] within Angular

Tips for individually assigning Fastify decorators within various plugins?

Angular 2 Form Error: Control Not Found

Insert discover within the tube

What is the best way to dynamically load content on a page when the URL changes within the same angular component?

Tips on searching for an entry in a database with TypeScript union types when the type is either a string or an array of strings

Is there a way to easily toggle a Material Checkbox in Angular with just one click?

Customizing npm package within an Angular 13 project

angular-in-memory-web-api encounters a 404 error

Navigational module and wildcard for routes not located

Implementing an overlay feature upon clicking a menu item - here's how!