React+TypeScript环境下如何为函数组件设置Prop类型替换any

解决方案 #

你已经提前定义了MovieProps接口，直接复用这个类型即可，有三种常用写法可选：

写法1：直接内联声明props类型

直接在参数处定义解构字段的类型，适合props结构非常简单的场景：

function MovieCard({ movie }: { movie: MovieProps }) {
  // 原有组件逻辑不变
}

写法2：单独声明组件Props接口

提前定义组件的入参类型，后续要加props属性的时候修改更方便，也是大部分项目的通用写法：

// 可以和之前的MovieProps定义放在同一个类型文件里
interface MovieCardProps {
  movie: MovieProps
}

function MovieCard({ movie }: MovieCardProps) {
  // 原有组件逻辑不变
}

写法3：配合React.FC泛型使用

如果要严格遵循React函数组件的类型规范，还可以用React内置的FC泛型包裹组件props类型，会自动带上children等React组件默认属性的类型提示：

interface MovieCardProps {
  movie: MovieProps
}

const MovieCard: React.FC<MovieCardProps> = ({ movie }) => {
  return (
    <div className="movie">
      <div className="movie-title">{movie.title}</div>
      <div className="movie-year">{movie.year}</div>
    </div>
  );
};

额外补充：你代码里用movie['title']的访问方式可以改成movie.title的点访问形式，TS会自动给出属性提示，写错属性名的时候也会直接抛出类型错误，更方便调试。

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