Тип TypeScript Функция, возвращающая Обещание - PullRequest
Новая
       6

Тип TypeScript Функция, возвращающая Обещание

0 голосов
/ 13 июня 2018

Я создаю ионное приложение, которое загружает RSS-канал из iTunes.Я могу получить RSS-канал и отобразить записи в моем приложении.

Я получаю эту ошибку и хотел бы понять, как правильно настроить переменную. 

export class MyPage {
    episodes: any;

    ...


    getRssFeed() {
        this.rssProvider.getFeed(this.rssUrl)
            .then(data => {
                console.log(data);
                this.episodes = data.items;
        });
    }
}

rssProvider.ts 

...

getFeed(rssUrl: string) {
    try {
        return new Promise(resolve => {
            this.http.get(`${this.baseUrl}?rss_url=${rssUrl}&api_key=${this.apiKey}&count=${this.count}`).subscribe(data => {
            resolve(data);
        }, error => {
           console.error(error);
        });
      });
    } catch (error) {
        console.error('Something really bad happened trying to get rss feed.');
        console.error(error);
    }
}

Я использую WebStorm для своей IDE, если это имеет какое-либо значение.

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

Typescript Error:
Property 'items' does not exist on type '{}'.

Что ж, items возвращается, поэтому Ионик не знает, что это такое.Есть ли правильный способ объявить переменную, чтобы я не получил красную подсказку об ошибке?

Спасибо за любые предложения!

Ответы [ 2 ]

0 голосов
/ 13 июня 2018

Тип обещания

Сначала необходимо определить, какой тип будет возвращен вашим API: 

type ResultType = {
  items: string[]
}

Затем скажите TypeScript, что getFeed возвращает обещание ResultType: 

getFeed(rssUrl: string): Promise<ResultType>

Или укажите общий тип после конструктора Promise: 

return new Promise<ResultType>(resolve => {})

Обработка ошибок

Наконец, вместо обработки ошибок непосредственно в getFeed используйтеотказаться от Promise для обработки ошибок непосредственно в Promise. 

getFeed(rssUrl: string) {
  return new Promise<ResultType>((resolve, reject) => {
    this.http.get(URL_ENDPOINT).subscribe(
      data => {
        resolve(data)
      },
      error => {
        // Transform your error here if needed
        reject(error)
      }
    )
  })
}

Использование

Использование Promise 

getFeed()
  .then(feed => {
    console.log(feed)
  })
  .catch(error => {
    console.error(error)
  })

Использование async / await: 

try {
  const feed = await getFeed()
  console.log(feed)
} catch (error) {
  console.error(error)
}
0 голосов
/ 13 июня 2018

Когда вы делаете return Promise, тип возвращаемого значения по умолчанию равен {}, поэтому TypeScript считает, что data на самом деле {}.Promise принимает общий аргумент, тип которого вы получаете от .then, поэтому вы можете сделать что-то вроде Promise<{ items: any }>.Вы также можете создать interface RssResponse { items: any } и, возможно, использовать лучший тип, чем просто any для элементов. 

return new Promise<RssResponse>(resolve => {

Однако вам не нужно заключать этот код в конструктор обещаний ввсе.У Observables есть метод toPromise, поэтому вы можете упростить его до: 

getFeed(rssUrl: string) {
    return this.http.get(...).toPromise();

..., который должен работать одинаково.

Более того, вы можете просто подписаться на результат вВаша страница: 

getFeed(rssUrl: string): Observable<RssResponse> {
  return this.http.get(...);


// In MyPage
getRssFeed() {
    this.rssProvider.getFeed(this.rssUrl).subscribe(data => {
        this.episodes = data.items;
    });
}
...