带接口的useState-响应本机打字稿

Question

有没有一种方法可以将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: ""});

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

Answer 1

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

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