时间戳

首页 > 解决方案 > TypeScript + React 获取不同类型的数组

reactjs - TypeScript + React 获取不同类型的数组

问题描述

我有三种类型

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 对象创建对象，但后来我不明白如何确定原始对象的类型。

提前感谢您的回答。

标签： reactjstypescripttypes

解决方案

在尝试确定原始 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`
}

推荐阅读