Interfaces e type aliases
Dar nome ao formato de um objeto — e por que isso substitui comentário explicando 'o que essa função espera'.
interface — o formato de um objeto, com nome
interface Usuario {
nome: string;
idade: number;
email?: string; // "?" = opcional, pode não vir
}
function saudar(usuario: Usuario) {
return `Olá, ${usuario.nome}!`;
}
saudar({ nome: "Ana", idade: 28 }); // ok, email é opcional
saudar({ nome: "Bia" });
// Error: Property 'idade' is missingSem a interface, qualquer pessoa chamando saudar teria que adivinhar (ou ler o corpo da função) quais campos o objeto precisa ter. Com ela, o editor autocompleta os campos e avisa na hora se faltar algum.
type — mais genérico que interface
type ID = string | number; // "union" — pode ser um OU outro
type Status = "pendente" | "pago" | "cancelado"; // union de valores literais, não só tipos
type Usuario = {
nome: string;
idade: number;
};interface só descreve formato de objeto; type descreve qualquer coisa — inclusive um union como Status acima, que não tem como ser escrito como interface. Na prática: use interface pra formato de objeto (mais comum em props de componente), type quando precisar de union, interseção, ou tipo mais genérico.
Um exemplo real: props de componente React
interface BotaoProps {
children: React.ReactNode;
variante?: "primario" | "perigo";
onClick?: () => void;
}
function Botao({ children, variante = "primario", onClick }: BotaoProps) {
return <button onClick={onClick} className={variante === "perigo" ? "bg-red-600" : "bg-blue-600"}>{children}</button>;
}Exercício
Escreva uma interface Produto com nome (string), preco (number) e categoria que só pode ser "eletronico" | "livro" | "roupa".