简化从 api 获取数据的打字稿接口

Question

我想从 omdbapi 获取电影数据。

我正在尝试嵌入 typescript 以确定我从端点获得的确切数据（我是 typescript 的新手）。

获取到的数据结构是这样的，如果是字符串，真的需要在界面中单独列出所有数据吗？

interface Movie {
  Title: string;
  Year: string;
  Rated: string;
  Released: string;
  Runtime: string;
  Genre: string;
  Director: string;
  Writer: string;
  Actors: string;
  Plot: string;
  Language: string;
  Country: string;
  Awards: string;
  Poster: string;
  Ratings: [
    {
      Source: string;
      Value: string;
    },
    {
      Source: string;
      Value: string;
    },
    {
      Source: string;
      Value: string;
    }
  ];
  Metascore: string;
  imdbRating: string;
  imdbVotes: string;
  imdbID: string;
  Type: string;
  DVD: string;
  BoxOffice: string;
  Production: string;
  Website: string;
  Response: string;
}

Answer 1

这听起来像是 Record 的工作：

type Movie = Record<"Title" | "Year" | "... more keys here ..." | "Website" | "Response", string> & {
  Ratings: {
    Source: string;
    Value: string;
  }[];
};

给它一个映射到字符串的所有键的并集，然后将记录与包含 Ratings.

类型的对象类型相交（组合）

简化从 api 获取数据的打字稿接口

Simplify the typescript interface for fetched data from api

typescript

react-typescript