Typescript/Angular: что не так с возвратом результата асинхронной функции?

Question

[KenyaWest]

Имеется сей код в сервисе:
roomService()

public async getAll(): Promise<Room[]> {

    const rooms: Room[] = [];

    await axios.get('somepath/kek:1488?SeigHeil&joking=true')
      .then((response) => {
            rooms.push(response.data);
        });
        return new Promise<Room[]>((resolve, reject) => {
            resolve(rooms);
            reject((err) => console.log(err));
        });
      })
      .catch((error) => {
        console.log(error);
      });

    return new Promise<Room[]>((resolve, reject) => {
      resolve(rooms);
      reject((err) => console.log(err));
    });
  }

Имеется код в компоненте, вызывающий данную функцию:
room-list.component

export class RoomListComponent {
  constructor() {

    this.rooms = async () => { await this.roomService.getAll(); };

  }
}

Пишем довольно простую ошибку о несовместимости типов:

error TS2740: Type '() => Promise<void>' is missing the following properties from type 'Room[]': pop, push, concat, join, and 25 more

Как решить данную проблему?

Comments

[KenyaWest]

MaxKorz, не знаю. Все так делают, я тоже буду, значит.

Answer 1

[msdosx86]

В сервисе
constructor (private http: HttpClient) {}

public getAll() {
return this.http.get('url').pipe(map(res => res.data));

В компоненте
this.roomService.getAll().subscribe(data => this.rooms = data)

Сори, с телефона пишу

Answer 2

[Demian Smith]

Вроде, если сделать

axios.get<Room[]>('somepath/kek:1488?SeigHeil&joking=true')...

, то тайпскрипт перестанет выпендриваться. Потому что будет явно указано какой тип данных возвращается сервером.

UPD: еще такой момент, ожидается что сервак возвращает массив Rooms, так что rooms.push(response.data); не заработает как ожидалось потому что в итоге получится что переменная rooms будет содержать всего один элемент, и этот элемент будет массивом. Чтоб было понятнее о чём я говорю, попробуйте в консоли браузера выполнять следующее: let arr1 = [], arr2 = [1,2,3]; arr1.push(arr2); console.log(arr1);

Но вобще весь getAll() можно сделать проще:

public getAll(): Promise<Room[]> {
    return axios.get<Room[]>('somepath/kek:1488?SeigHeil&joking=true')
      .then(response => response.data)
      .catch(err => console.log(err))
}

Так же проще?

C axios никогда не работал, так что этот ответ может быть полной лажей. Но попробуйте предложенный вариант. Судя по описанию типов, всё должно получиться как ожидается.

Comments

[KenyaWest]

Такая шняга вылазит. Я так понял, в d.ts описал Юнион-тип, который строго отслеживается Typescript'ом и отказывается допускать тип Void у функции, который принимает только Promise<Room[]>.

[Алексей Ермолаев]

В блоке catch делается консоль лог, который ничего не возвращает, следовательно тс думает что это неявный юнион тип void | Room[].
Нужно либо поменять сигнатуру функции, либо в блоке catch возвращать значение по умолчанию , в данном случае пустой массив.