Нужна помощь в устранении ошибки Angular 9 TypeScript (TypeCasting)

Question

Я обновил Angular с 4 до 9 и теперь, после того, как смог заставить его работать, все еще получаю некоторые ошибки, которые я не могу устранить.

Мой код:

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;
}

Источник данных getTrades ():

getTrades() {

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

}

getTrades () возвращает массив json со следующими данными:

ID: 1
UserID: 1
DateTime: "2017-12-25T00:00:00+0000"
Exchange: {ID: 1, Title: "BitTrex"}
BaseCoin: {ID: 718, Abbr: "BTC"}
MarketCoin: {ID: 743, Abbr: "XVG"}
Price: "0.000013470000"
Amount: "1019.014328640000"
Total: 0.0137261230067808
Last: "0.000005470000"
Type: {ID: 1, Title: "Limit Buy"}
Status: {ID: 2, Title: "Closed"}
Symbol: "Ƀ"

Это ошибка, которую я получаю:

ОШИБКА в src / app / components / trades / trades.component.ts: 100: 68 - ошибка TS2345: Аргумент типа 'unknown' не может быть присвоен параметру типа 'Trade []' , Тип '{}' отсутствует следующие свойства из типа 'Trade []': длина, поп, pu sh, concat и еще 26.

this.trades = new MatTableDataSource (trades);

Любая помощь в понимании этой ошибки и ее устранении будет очень признательна. Спасибо.

Обновление

Когда я объявил переменную trades, я сделал это следующим образом:

Trade[]

Вместо этого я объявил это как:

MatTableDataSource<Trade>

Answer 1

Вы должны быть более явными в отношении типов:

Во-первых, используйте наиболее удобную перегрузку HttpClient.get , для которой требуется параметр generi c и интерпретирует тело как JSON.

Создает запрос GET, который интерпретирует тело как объект JSON и возвращает тело ответа в заданном типе.

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

затем добавьте явные типы в getTrades ()

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

Еще лучше, отбросьте конвертацию в обещание и подпишитесь непосредственно на Observable, возвращаемый источником данных.

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

Обновление

Проверьте, используете ли вы HttpClient с @angular/common/http, а не с @angular/core. Пакет @angular/http устарел с прибытием @angular/common/http и был удален с Angular 8.

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

Пакет больше не поддерживается. Вместо этого используйте @ angular / common, см. https://angular.io/guide/deprecations#angularhttp

Обновление 2 Ваши проблемы с назначением показывают, что оно всегда было неверным. MatTableDataSource<Trade> не Trade[]

Я твердо верю, что причина, по которой он работал в вашем старом проекте, заключается в том, что вы использовали TypeScript 2.x. Таким образом, getTrades() было выведено на Promise<any> С Typescript 3.x getTrades() (без явной печати) выведено на Promise<unknown>

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

В TypeScript 3.0 появился новый тип top unknown. unknown является типобезопасным аналогом any. Все может быть назначено на unknown, но unknown не может быть назначено ни на что, кроме себя и любого другого без утверждения типа или сужения потока управления. Аналогичным образом, операции с unknown не допускаются без предварительного подтверждения или сужения до более определенного типа c.

Answer 2

Не рекомендуется подписываться внутри обратного вызова Promise. Это может привести к утечкам памяти.

Если вам нужно преобразовать Observable в Promise, используйте toPromise()

Попробуйте строго набрать текст getTrades():

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