Olá William! Tudo bem?
Você está certo ao pensar em como evitar duplicação de código e facilitar a manutenção da sua aplicação. Uma prática comum para compartilhar tipos e interfaces entre componentes em projetos TypeScript é criar um arquivo separado para definições de tipos:
Crie um arquivo de tipos: Dentro da pasta src, você pode criar uma pasta chamada types ou models e, dentro dela, um arquivo como movieTypes.ts.
Defina seus tipos nesse arquivo: No arquivo movieTypes.ts, você pode definir os tipos Categoria e Censura:
// src/types/movieTypes.ts
export type Categoria = "2D" | "3D";
export type Censura = "Livre" | "10 anos" | "12 anos" | "14 anos" | "16 anos";
Importe os tipos onde necessário: Nos componentes Tag e CardMovie, você pode importar esses tipos:
// Exemplo no CardMovie
import { Categoria, Censura } from '../../types/movieTypes';
interface CardMovieProps {
src: string;
alt: string;
titulo: string;
categoria: Categoria;
censura: Censura;
genero: string;
duracao: number;
}
Dessa forma, você centraliza a definição dos tipos em um único local, o que facilita a manutenção e reduz a chance de erros ao atualizar ou adicionar novos valores aos tipos. Além disso, melhora a organização do seu código e segue boas práticas de desenvolvimento.
Espero ter ajudado. Conte sempre com o nosso apoio :)
Abraços e bons estudos!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado