TypeScript类型返回Promise的函数

Question

我正在构建一个从iTunes中提取RSS源的离子应用程序。我能够获取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);
    }
}

如果有任何重要意义，我正在为我的IDE使用WebStorm。

这是我得到的错误：

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

哪个好，items回来了，所以离子不知道它是什么。是否有正确的方法来声明变量，所以我没有得到红色错误提示？

感谢您的任何建议！

Answer 1

执行return Promise时，返回类型默认为{}，因此TypeScript认为data实际上是{}。 Promise采用的泛型参数是.then的类型，因此您可以执行Promise<{ items: any }>之类的操作。您还可以创建interface RssResponse { items: any }，并且可能使用比any更好的类型用于项目。

return new Promise<RssResponse>(resolve => {

但是，您根本不需要将此代码包装在promise构造函数中。 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;
    });
}

Answer 2

承诺类型

首先需要定义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)
}