React TypeScript开发中如何为组件Prop正确指定类型？

React 组件的入参永远是包含所有传入属性的对象，你在父组件中给子组件传递了名为movies的属性，因此实际传入子组件的props整体类型是{ movies: IMovie[] }，而非直接的IMovie[]。之前子组件直接将props声明为IMovie[]类型，和实际传入的对象类型不匹配，因此触发报错。

下面是两种常用的正确写法：

直接声明props对象类型 #

可以单独声明props的接口类型，也可以在参数位置直接定义：

// MovieOverview.tsx
// 写法1：提前声明props接口
interface MovieOverviewProps {
  movies: IMovie[]
}

const MovieOverview = (props: MovieOverviewProps) => {
  const movies = props.movies;
  // 原有逻辑保持不变
}

// 写法2：参数直接解构，写法更简洁
const MovieOverview = ({ movies }: { movies: IMovie[] }) => {
  // 直接使用movies变量即可
  // 原有逻辑保持不变
}

配合React.FC泛型定义（更规范的函数组件写法） #

如果使用React官方推荐的函数组件类型标注，可以用泛型传入props类型：

import type { FC } from 'react'

interface MovieOverviewProps {
  movies: IMovie[]
}

const MovieOverview: FC<MovieOverviewProps> = ({ movies }) => {
  // 原有逻辑保持不变
}

内容的提问来源于stack exchange，提问作者Peter Boomsma