TypeScript + React 获取不同类型的数组答案

【问题标题】：TypeScript + React fetch array with different typesTypeScript + React 获取不同类型的数组
【发布时间】：2019-01-14 01:47:31
【问题描述】：

我有三种类型

class Media {
    private _id: number;
    //getters and setters
}

class Serial extends Media {
    private _watched_series: number;
    //getters and setters
}

class Movie extends Media {
    private _watched: boolean;
    //getters and setters
}

和后端具有相同的结构。后端返回Array<Media>，但包含子类型。

我正在尝试这个：

ListsApi.mediasFromList(list.id).then((response: Response) => {
        response.json().then((value: Array<Movie | Serial>) => {
            this.setState({medias: value});
        });
    });

但是当我尝试使用typeof 时，我总是得到object。

我做错了什么？我正在尝试在媒体fromJson 中编写函数以从原始 json 对象创建对象，但后来我不明白如何确定原始对象的类型。

提前感谢您的回答。

【问题讨论】：

标签： reactjs typescript types

【解决方案1】：

在尝试确定原始 JSON 对象的类型时，您必须手动检查对象的属性以测试它是否与特定类型匹配。以下函数可用于确定您的媒体是否属于Movie 类型：

isMovie(input: Movie | Serial): input is Movie {
    return input.hasOwnProperty('_watched');
}

然后当你测试它是Movie 还是Serial 时，输入：

if (this.isMovie(media)) {
    // media will now be treated as type `Movie`
}

【讨论】：