Entonces comencé a aprender mecanografiado y no puedo entender cómo pasar accesorios. Tengo una búsqueda de películas, así que tengo la siguiente cadena de componentes: Aplicación -> Héroe (un gran div que muestra todo) -> Contenedor (un contenedor que contiene divs con películas en cada uno) -> MovieItem (un div que contiene todo información sobre la película, que obtenemos de los datos json).
Hice la siguiente interfaz:
export interface IMovie{ rate: string; title: string, tagline: string; date: string; }Editar: edité el código de las respuestas y así es como se ve ahora:
Componente de la aplicación:
const App = () => { const [movies, setMovies] = useState<MovieProps[]>([]); useEffect(() =>{ fetchMovies(); }, []) async function fetchMovies() { try{ let apikey = '0ce1e51fc4f5b92e2f8984a6aa026503'; let url: string = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key='; url = url + apikey; const response = await axios.get<MovieProps[]>(url); setMovies(response.data); console.log(response.data); }catch(e){ alert(e) } } return ( <div className="App"> <Header/> <Hero movies={movies}/> </div> ); } export default App;Componente héroe:
const Hero = ({movies}: MovieProps) => { return ( <div className="hero"> <h1>trending today</h1> <Container movies={movies}/> </div> ); }; export default Hero;Componente contenedor:
const Container = ({movies}: MovieProps) => { return ( <div className="container"> <MovieItem movies={movies}/> </div> ); }; export default Container; Pasé accesorios hasta MovieItem, pero aquí está el problema, en el componente App.tsx no puedo pasar la matriz, porque cuando trato de pasar al componente Hero de la siguiente manera: <Hero movies={movies}/> , obtengo el siguiente error:
Type 'MovieProps[]' is not assignable to type 'MovieType[]'. Type 'MovieProps' is missing the following properties from type 'MovieType': rate, title, tagline, date Creé un archivo index.d.ts para almacenar todas las interfaces, se ve así:
declare module 'myMovies' { type MovieType = { rate: string, title: string, tagline: string, date: string, }; interface MovieProps { movies: MovieType[], } } module.exports = { MovieType, MovieProps }; Así que no estoy seguro de cuál podría ser el problema, declaré una matriz predeterminada en useState() e intenté pasar al componente Hero.
Su escritura parece confundir una sola película y su tipo de accesorios, que tiene una variedad de múltiples películas.
Tampoco necesita un archivo index.d.ts en absoluto; de hecho, no deberías tener uno. (Puede exportar sus tipos comunes desde, por ejemplo, un archivo types.ts ).
Aquí hay un ejemplo donde todo lo que tienes está en un archivo.
import { useState, useEffect } from "react"; interface MovieType { rate: string; title: string; tagline: string; date: string; } interface MoviesProps { movies: MovieType[]; } function App() { const [movies, setMovies] = useState<MovieType[]>([]); useEffect(() => { setMovies([{ rate: "8", title: "Hello", tagline: "Yes", date: "2021" }]); }, []); return ( <div className="App"> <Hero movies={movies} /> </div> ); } function Hero({ movies }: MoviesProps) { return ( <div className="hero"> <h1>trending today</h1> <Container movies={movies} /> </div> ); } function Container({ movies }: MoviesProps) { return ( <div className="container"> {movies.map((movie) => ( <MovieItem key={movie.title} movie={movie} /> ))} </div> ); } function MovieItem({ movie }: { movie: MovieType }) { return ( <div className="movie"> <span className="movie__title">{movie.title}</span> <span className="movie__title">{movie.tagline}</span> <span className="movie__title">{movie.rate}</span> <span className="movie__title">{movie.date}</span> <button>Button</button> </div> ); }Tiendo a definir simplemente los accesorios de los componentes directamente:
const MovieItem = (props: movieProps) => { const { movies } = props; ...También noté que no tienes accesorios de 'películas', solo un accesorio de 'películas'. Corrige tu ortografía
try
const MovieItem = ({movies}):({movies:movieProps}) => { return ( <div> {movies.map(movie => //and here I have an error Parameter 'movie' implicitly has an 'any' type. <div className="movie"> <span className="movie__title">{movie.title}</span> <span className="movie__title">{movie.tagline}</span> <span className="movie__title">{movie.rate}</span> <span className="movie__title">{movie.date}</span> <button>Button</button> </div> )} </div> ); };El problema con la declaración de accesorios para componentes funcionales en Typescript es que la implementación subyacente de reaccionar espera que los accesorios se extiendan desde su origen, que es el error que está recibiendo.
Una solución es describir prop en la definición del componente en lugar de pasar la interfaz de props al generador de componentes ( FC )