Как сказать тайпскрипту что я жду обьект с нужными полями в jsx?

Question

[JavaSscriptNoob]

Мой код который есть на данный момент
Мой тип :

export interface IFilm {
    id : number;
    media_type : string;
    overview : string;
    poster_path : string;
    release_date : string;
    title : string;
    vote_average : number;
    vote_count : number;
}

Функция который принимает тип

export const Film = (film: IFilm): ReactElement => {
  return <div></div>;
};

Компонента
<Film film={film} />
Где film это

backdrop_path: "/8Y43POKjjKDGI9MH89NW0NAzzp8.jpg"
id: 550988
media_type: "movie"
original_language: "en"
original_title: "Free Guy"
overview: "У сотрудник..."
popularity: 2165.83
poster_path: "/qJZ3UeKAOgz2kFVJPZZFzLtn1Qk.jpg"
release_date: "2021-08-11"
title: "Главный герой"

Ошибка

Тип "{ film: IFilm; }" не может быть назначен для типа "IntrinsicAttributes & IFilm".
Свойство "film" не существует в типе "IntrinsicAttributes & IFilm"

В тайпскрипте совсём зелёный , понимаю глупая ошибка но всё же ...?

Comments

[Lynn «Кофеман»]

Аргумент компонента это всегда props, а film должен быть одним из полей props

[JavaSscriptNoob]

Lynn «Кофеман», тобеж как то так ? ({film : IFilm})

Answer 1

[Aetae]

export const Film = ({ film }: { film: IFilm ): ReactElement => {
  return <div></div>;
};

А лучше:

export const Film: React.FC<{
  film: IFilm
}> = ({ 
  film 
}) => {
  return <div></div>;
};

Comments

[JavaSscriptNoob]

Понял спасибо!