打字稿：反应子组件类型

Question

我正在将我的 React 应用程序重构为 Typescript。我为子组件添加了类型，但现在我正在处理父组件，我不知道如何输入它。

我从端点获取数据并将其与 Recommendations 的布尔值一起传递给 loading。如何在此处为父级添加类型以及在此处传递时需要更改哪些内容：<Recommendations title={"Trending"} data={trending} loading={isLoading} />？

此外，我的应用程序编译正确，但我在子组件中正确编译了吗？

应用组件（父）

const App = (): ReactElement => {
  const [trending, setTrending] = useState([]);
  const [isLoading, setIsLoading] = useState<boolean>(false);

  useEffect(() => {
    const fetchTrending = async () => {
      setIsLoading(true);

      const res = await fetch(
        `https://api.themoviedb.org/3/trending/movie/day?api_key=${API_KEY}`
      );
      const data = await res.json();
      const results = data.results;

      setTrending(results);
      setIsLoading(false);
    };

    fetchTrending();
  }, [API_KEY]);

  return (
    <div className="App">
      <Recommendations title={"Trending"} data={trending} loading={isLoading} />
    </div>
  );
};

export default App;

推荐组件（子）

interface IRecommendationData {
  data: Array<IRecommendations>;
  loading: boolean;
  title: string;
}

interface IRecommendations {
  title: string;
  id: string;
  poster_path: string;
}

const Recommendations = ({title, data, loading}: IRecommendationData): ReactElement => {
  
  return (
    <div className="recommendationSection">
      <h3>{title}</h3>

      {loading ? (
        <h3>Loading...</h3>
      ) : (
        <Slider {...settings}>
          {data.map((movie) => {
            return (
              <Link
                to={{
                  pathname: `/movie/${movie.id}`,
                  state: { ...movie },
                }}
                key={movie.title}
              >
                <div className="banner recBanner">
                  <img
                    src={
                      movie.poster_path
                        ? `https://image.tmdb.org/t/p/original/${movie.poster_path}`
                        : "https://www.genius100visions.com/wp-content/uploads/2017/09/placeholder-vertical.jpg"
                    }
                    alt={movie.title}
                  />
                </div>
              </Link>
            );
          })}
        </Slider>
      )}
    </div>
  );
};

export default Recommendations;

--- 编辑---

应用组件（父）

在父级中，我从子级中取出第二个 interface，然后将其 as per this post 作为 interface 的数组导出。

interface IRecommendations {
  title: string;
  id: string;
  poster_path: string;
}

export type RecommendationData = IRecommendations[];

const [trending, setTrending] = useState<IRecommendations[]>([]);

推荐组件（子）

然后我将 data 设置为所说的导入的 interface 并将道具类型设置为那个。

import { RecommendationData } from "../../pages/Home";

interface IRecommendationData {
  data: RecommendationData;
  loading: boolean;
  title: string;
}

const Recommendations = ({title, data, loading}: RecommendationData): ReactElement => {