在 Typescript 中返回多种类型的 Observable

Question

我有一个方法，它根据请求 url 返回一个对象或一组相同对象。逻辑很简单；

myservice.service.ts：

private _url_User = "https://api.github.com/users/dummyuser";
constructor(private _http: Http){}

getUsers(followers?: boolean): Observable<User | User[]>{
        this._url_User += followers?"/followers":"";//if followers equals true edit url, this returns array of same user object
        return this._http.get(this._url_User).map(res=>res.json());
    }

mycomponent.component.ts:

import { Component,OnInit } from '@angular/core';
import {Auth} from '../../services/auth.service';
import {CommentService} from '../../services/comment.service';
import {User} from '../../infrastructure/user';

@Component({
    moduleId:module.id,
    selector: 'app-comment',
    templateUrl: '../../templates/comment.component.html'
})

export class CommentComponent implements OnInit{ 
    user:User;
    followers:User[];
    constructor(private auth: Auth, private commentService: CommentService){
    }
    ngOnInit(){
        this.commentService.getUsers().subscribe(d=>{ this.user=d[0]; console.log(this.user.email)});
        this.commentService.getUsers(true).subscribe(d=>{this.followers=d; console.log(this.followers[0].email)});
    }
}

这是我无法处理的错误消息；

Answer 1

一般来说，我建议做的实际上是将其拆分为两种方法，而不是使用布尔标志。这将更简单，更清晰，并且还将在这里免费解决您的打字问题。

如果您真的不想这样做，那么您将需要向您的方法添加一个函数重载。有了这些，你可以告诉 TypeScript 这个函数总是返回一个标志设置为 false 的用户，或者许多用户如果标志设置为 true，你就会得到你正在寻找的行为。

此函数的重载如下所示：

getUsers(): Observable<User>;
getUsers(followers: false): Observable<User>;
getUsers(followers: true): Observable<User[]>;
getUsers(followers?: boolean): Observable<User | User[]>{
    this._url_User += followers?"/followers":"";
    return this._http.get(this._url_User).map(res=>res.json());
}

我在操场上整理了一个工作示例，如果你想确切地看到这一切是什么样的。

请注意，这确实保留了它仍然存在的潜在歧义。即，如果您使用布尔值调用 getUsers 并且在编译时 TypeScript 不知道这是真还是假，它仍然会返回Observable<User | User[]>. 您必须使用类型断言或类型保护来获取正确的类型 -如果您不熟悉这些内容，请查看手册中的类型保护和区分类型部分。