TypeScript type Function returning a Promise

Question

I am building an ionic app that is pulling in an rss feed from iTunes. I am able to get the rss feed and display the entries on my app.

I am getting this error, and would like to understand how to properly set up the variable.

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

I am using WebStorm for my IDE if that is of any significance.

This is the error I am getting:

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

Which ok, items is coming back, so ionic doesn't know what it is. Is there a proper way to declare the variable so I don't get the red error hinting?

Thank you for any suggestions!

Answer 1

Promise Type

You first need to define what will be the type returned by your API:

type ResultType = {
  items: string[]
}

Then, tell TypeScript that getFeed returns a Promise of ResultType:

getFeed(rssUrl: string): Promise<ResultType>

Or specify the generic type after the Promise constructor:

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

Error Handling

Finally, instead of handling error directly in getFeed use the reject from Promise to do error handling directly in the 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)
      }
    )
  })
}

Usage

Using Promise

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

Using async/await:

try {
  const feed = await getFeed()
  console.log(feed)
} catch (error) {
  console.error(error)
}

Answer 2

When you do return Promise, the return type defaults to {}, so TypeScript thinks that data is actually {}. Promise takes a generic argument that is the type you get from .then, so you could do something like Promise<{ items: any }>. You could also create interface RssResponse { items: any }, and probably use a better type than just any for items.

return new Promise<RssResponse>(resolve => {

---

However, you don't need to wrap this code in a promise constructor at all. Observables have a toPromise method, so you can simplify this to:

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

...which should function identically.

Moreover, you can just subscribe to the result in your Page:

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


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