<h2>Fundamentos: Type Aliases vs Interfaces</h2>
<p>Type Aliases e Interfaces são dois mecanismos fundamentais para definir estruturas de dados em TypeScript. Embora sirvam propósitos semelhantes, têm diferenças importantes. Uma <strong>Interface</strong> é um contrato que descreve a forma de um objeto, enquanto um <strong>Type Alias</strong> é um sinônimo para qualquer tipo — primitivo, union, tuple ou objeto.</p>
<p>A principal diferença prática: interfaces podem ser estendidas e implementadas por classes, enquanto type aliases oferecem maior flexibilidade para trabalhar com unions e tipos complexos. Ambas usam verificação estrutural (duck typing), mas interfaces têm melhor suporte para herança e replicação de declarações. Escolha interfaces quando modelar contratos de dados que classes implementarão; use type aliases para composições de tipos mais complexas.</p>
<pre><code class="language-typescript">// Interface: contrato com capacidade de extensão
interface Usuario {
id: number;
nome: string;
email: string;
}
// Type Alias: sinônimo de tipo, aceita unions e primitivos
type StatusPagamento = 'pendente' | 'processando' | 'concluído' | 'falhou';
// Aplicação prática
const usuario: Usuario = {
id: 1,
nome: 'Ana Silva',
email: 'ana@example.com'
};
const status: StatusPagamento = 'concluído';</code></pre>
<h2>Interfaces na Prática: Padrões e Extensão</h2>
<p>Interfaces brilham quando você precisa descrever contratos que classes implementarão. Use herança de interfaces para reutilizar estruturas comuns e construir hierarquias de tipos. A extensão de interfaces é feita com a palavra-chave <code>extends</code>, permitindo composição elegante de comportamentos.</p>
<p>Um padrão comum é usar interfaces genéricas para criar reutilizáveis que funcionam com diferentes tipos de dados. Isso reduz duplicação e torna o código mais maintível. Combine interfaces com classes para garantir que objetos sigam um contrato específico.</p>
<pre><code class="language-typescript">// Interface base
interface Entidade {
id: number;
criadoEm: Date;
atualizadoEm: Date;
}
// Interface estendida
interface Produto extends Entidade {
nome: string;
preco: number;
estoque: number;
}
// Interface genérica
interface Repositorio<T> {
obter(id: number): Promise<T>;
listar(): Promise<T[]>;
criar(item: T): Promise<T>;
atualizar(id: number, item: Partial<T>): Promise<T>;
deletar(id: number): Promise<void>;
}
// Implementação concreta
class RepositorioProduto implements Repositorio<Produto> {
async obter(id: number): Promise<Produto> {
return {
id,
nome: 'Notebook',
preco: 3500,
estoque: 10,
criadoEm: new Date(),
atualizadoEm: new Date()
};
}
async listar(): Promise<Produto[]> {
return [];
}
async criar(item: Produto): Promise<Produto> {
return item;
}
async atualizar(id: number, item: Partial<Produto>): Promise<Produto> {
return { id } as Produto;
}
async deletar(id: number): Promise<void> {}
}</code></pre>
<h2>Type Aliases Avançados: Unions, Intersections e Mapeamento</h2>
<p>Type Aliases excedem interfaces quando você precisa modelar tipos mais complexos. Unions permitem que um valor seja um de vários tipos, intersections combinam múltiplos tipos em um, e tipos mapeados transformam objetos dinamicamente. Esses recursos são essenciais para código TypeScript profissional.</p>
<p>Use unions para descrever valores que podem ser múltiplos estados, como respostas de API que retornam sucesso ou erro. Intersections são úteis para combinar comportamentos de múltiplos tipos. Tipos mapeados extraem propriedades automaticamente, reduzindo boilerplate significativamente.</p>
<pre><code class="language-typescript">// Union Type: múltiplas possibilidades
type Resultado<T> = { sucesso: true; dados: T } | { sucesso: false; erro: string };
// Intersection Type: combinação de tipos
type Usuario = { id: number; nome: string };
type Timestamps = { criadoEm: Date; atualizadoEm: Date };
type UsuarioCompleto = Usuario & Timestamps;
// Tipos Mapeados: transformação dinâmica
type Leitura<T> = {
readonly [K in keyof T]: T[K];
};
type Opcional<T> = {
[K in keyof T]?: T[K];
};
// Aplicação prática
function procesarResultado<T>(resultado: Resultado<T>): void {
if (resultado.sucesso) {
console.log('Dados:', resultado.dados);
} else {
console.log('Erro:', resultado.erro);
}
}
const respostaApi: Resultado<{ usuario: string }> = {
sucesso: true,
dados: { usuario: 'João' }
};
procesarResultado(respostaApi);
// Usando tipos mapeados
const usuario: Leitura<UsuarioCompleto> = {
id: 1,
nome: 'Maria',
criadoEm: new Date(),
atualizadoEm: new Date()
};
const usuarioOpcional: Opcional<Usuario> = { nome: 'Pedro' };</code></pre>
<h2>Integrando com Frameworks: Exemplos Reais</h2>
<p>Em aplicações reais, você usará interfaces e type aliases juntos com frameworks populares como Express, React e Nestjs. As interfaces definem contratos de dados enquanto type aliases gerenciam tipos de requisição/resposta e estados complexos. Essa sinergia garante type safety em toda a stack.</p>
<p>Com Express, interfaces descrevem bodies de requisição enquanto type aliases modelam respostas variáveis. No React com TypeScript, interfaces definem props de componentes e type aliases gerenciam estados e eventos. Nestjs oferece decoradores que funcionam perfeitamente com ambas as construções, permitindo validação automática e documentação gerada.</p>
<pre><code class="language-typescript">// Exemplo com Express
import express, { Request, Response } from 'express';
interface CriarProdutoRequest {
nome: string;
preco: number;
descricao?: string;
}
type ApiResponse<T> = { statusCode: number; dados?: T; erro?: string };
const app = express();
app.use(express.json());
app.post('/produtos', (req: Request<{}, {}, CriarProdutoRequest>, res: Response<ApiResponse<{ id: number }>>) => {
const { nome, preco } = req.body;
if (!nome || preco <= 0) {
return res.status(400).json({
statusCode: 400,
erro: 'Nome e preço válido são obrigatórios'
});
}
res.status(201).json({
statusCode: 201,
dados: { id: 1 }
});
});
// Exemplo com React
interface ButtonProps {
label: string;
onClick: () => void;
disabled?: boolean;
}
type ButtonVariant = 'primary' | 'secondary' | 'danger';
const Button: React.FC<ButtonProps & { variant?: ButtonVariant }> = ({
label,
onClick,
disabled = false,
variant = 'primary'
}) => {
return (
<button onClick={onClick} disabled={disabled} className={btn-${variant}}>
{label}
</button>
);
};</code></pre>
<h2>Conclusão</h2>
<p>Dominar Interfaces e Type Aliases é fundamental para escrever TypeScript profissional e mantível. <strong>Primeiro ponto:</strong> use interfaces para contratos de dados e quando precisar de herança; use type aliases para composições complexas, unions e tipos mapeados. <strong>Segundo ponto:</strong> combine ambas strategicamente — uma não substitui a outra, elas são complementares na construção de sistemas robustos. <strong>Terceiro ponto:</strong> pratique integrando essas construções com frameworks reais, pois é onde seu verdadeiro valor emerge na prática diária.</p>
<h2>Referências</h2>
<ul>
<li><a href="https://www.typescriptlang.org/docs/handbook/2/objects.html" target="_blank" rel="noopener noreferrer">TypeScript Handbook: Interfaces</a></li>
<li><a href="https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-aliases" target="_blank" rel="noopener noreferrer">TypeScript Handbook: Type Aliases</a></li>
<li><a href="https://www.oreilly.com/library/view/effective-typescript/9781492053736/" target="_blank" rel="noopener noreferrer">Effective TypeScript by Dan Vanderkam</a></li>
<li><a href="https://www.typescriptlang.org/docs/handbook/2/types-from-types.html" target="_blank" rel="noopener noreferrer">Advanced TypeScript: Generic Patterns</a></li>
<li><a href="https://basarat.gitbook.io/typescript/" target="_blank" rel="noopener noreferrer">TypeScript Deep Dive - Basarat Ali Syed</a></li>
</ul>