首页 文章

带有Angular HTTP的类型化observable

提问于
浏览
0

short:有一个方法返回一个http调用(get,put,whatever),使用typescript类型确定返回的项的类型?

在TypeScrpt级别,promise是泛型类型 . 它会传递您期望的消息类型,例如 IPromise<T> . 这样,您可以定义方法返回类型为 Promise<number[]> 的promise,它基本上返回一个使用数字列表解析的promise . 多亏了这一点,你使打字稿更加强大 .

您可以对Observables(RxJS)执行相同的操作 . 很简单,我们已经 Observable<T> (只需看看npm中的 Observable.d.tsrxjs ) . 您在此流中期望的每个项目都是T类型(这是 subscribe 回调参数 - 必须是 - TypeScript会为您检查) .

Angular

回到Angular,HTTP模块包装了Observables . 它不会返回 Observable<Response> ,其中 Response 是HTTP调用的Angular内置包装器 . 但我发现我失去了预定义HTTP应该返回的类型的可能性 .

问题是:是否有可能在角度http调用中预定义什么类型的http-call / observable返回?像 Observable<User> 这样的地方 User 只是我的应用程序界面 .

2 回答

  • 2

    我假设你正在寻找这样的东西:

    import 'rxjs/add/operator/catch';
    import 'rxjs/add/operator/do';
    import 'rxjs/add/operator/map';
    import 'rxjs/add/observable/of';
    
    get(id: number): Observable<User> {
        const url = `${this.baseUrl}/${id}`;
    
        return this.http
                   .get(url)
                   .do((response: Response) => {
                     if (!response) {
                       return Observable.of(null);
                     }
                   })
                   .map((response: Response) => {
                       return <User>response.json();
                   })
                   .catch(error => {
                     return Observable.of(null);
                   });
    }
    
  • 0

    也许这会帮助别人......

    @Injectable()
    export class UsersModel {
      getItem(id: number): Observable<User> {
        return this.http.get(`${API_URL}/users/${id}`, {
          headers: this.getHeaders()
        });
      }
    }
    

    在上面的代码中,抛出的错误是 Observable<Response>Observable<User> ,不同的数据类型冲突 . 解决方案只是将 observable.map((res) => res.json()) 包含在DAO方法中,如下所示:

    @Injectable()
    export class UsersModel {
      getItem(id: number): Observable<User> {
        return this.http.get(`${API_URL}/users/${id}`, {
          headers: this.getHeaders()
        })
        .map((res) => res.json());
      }
    }
    

    现在没有冲突,因为 res.json (类Response)返回 any . 这开启了我们使 getItem 方法返回我们某些类型的可能性: getItem(id: number): Observable<User> . 而且我已经得到了我需要的东西 - 在DAO之外 - 在一个组件中,例如,我做:

    this.UsersModel.getItem().subscribe(u => {
      u // u is of User already, yay!
    })
    

相关问题