useState 与接口 - 反应本机打字稿

Posted 2023-02-22

【中文标题】useState 与接口 - 反应本机打字稿

【英文标题】：useState with interface- react native typescript

【发布时间】：2020-11-18 20:43:58

【问题描述】：

有没有一种方法可以将 useState 与接口类型一起使用？

这就是我正在尝试做的事情：

const [movie, setMovie] = useState(null);

[...]

.then((responseJson) => 
            var movie: Movie = 
                id : id,
                title: responseJson.original_title,
                backdrop: "https://image.tmdb.org/t/p/original" + responseJson.backdrop_path,
                note: responseJson.vote_average,
                numberNote: responseJson.vote_count,
                year: responseJson.release_date,
                runtime: responseJson.runtime,
                genre: responseJson.genres,
                plot: responseJson.overview,
            ;
            setMovie(movie);
        )

但是类型有错误。

我的界面：

interface Movie 
    id: number;
    title: string;
    backdrop: string;
    note: number;
    numberNote: number,
    year: number,
    runtime: number,
    genre: id: number, name: string[],
    plot: string

根据这篇文章：Set types on useState React Hook with TypeScript.

我可以尝试做类似的事情：

const [movie, setMovie] = useState<Movie>(id: 0,
        title: "",
        backdrop: "",
        note: 0,
        numberNote: 0,
        year: 0,
        runtime: 0,
        genre: [id: 0, name: ""],
        plot: "");

但它看起来并不干净，我认为这不是将随机值置于第一个状态的好解决方案。

【问题讨论】：

这能回答你的问题吗？ Set types on useState React Hook with TypeScript

是和不是...我会更新我的帖子来解释原因

可以使用联合类型(null)

【参考方案1】：

您可以通过以下方式暗示状态类型：

const [movie, setMovie] = useState<Movie|null>(null);