export default vs export: o que escolher no TypeScript?

TypeScript export vs default export: entendendo de uma vez por todas

Olá, amigo! Se você está começando sua jornada no TypeScript (ou já não é mais iniciante, mas ainda se confunde com exports), este artigo é seu salva-vidas. O tópico "TypeScript export vs default export" é um dos mais quentes no Stack Overflow, e não é à toa. Parece um detalhe, mas quantas discussões já gerou! Vamos organizar tudo, entender o que é o quê e lembrar de uma vez por todas quando usar export e quando usar export default.

Não vamos apenas listar regras de forma seca. Vamos analisar exemplos reais, erros típicos de iniciantes e dar recomendações concretas. Vamos nessa!

O que é export no TypeScript e para que serve?

Imagine que você está escrevendo um programa grande. Você não vai colocar todo o código em um único arquivo, certo? Claro que não. Você divide em módulos: um arquivo cuida dos usuários, outro dos cálculos, outro da interface. Export é a forma de dizer ao TypeScript: "Ei, esta função, classe ou variável pode ser usada em outros arquivos". E import é a forma de dizer: "Deixe-me pegar esta coisa de outro arquivo".

No TypeScript, existem dois tipos principais de export: export nomeado (named export) e export padrão (default export). E é aqui que a coisa fica interessante.

Export nomeado (named export) — precisão e organização

Export nomeado é quando você indica explicitamente o nome do que está exportando. É como se você colocasse uma etiqueta brilhante em cada caixa na sua garagem: "Ferramentas", "Equipamentos Esportivos", "Livros Antigos".

A sintaxe é muito simples. Basta adicionar a palavra-chave export antes da declaração:

Exemplo de export nomeado

// utils.ts\nexport const PI = 3.14159;\n\nexport function calculateArea(radius: number): number {\n  return PI * radius * radius;\n}\n\nexport class Circle {\n  constructor(public radius: number) {}\n}

Agora vamos importar isso em outro arquivo:

// app.ts\nimport { PI, calculateArea, Circle } from './utils';\n\nconsole.log(PI); // 3.14159\nconst area = calculateArea(5);\nconst myCircle = new Circle(10);

Observe as chaves { } no import. Elas são um sinal claro de export nomeado. Você pode importar apenas o que precisa e é obrigado a usar os mesmos nomes especificados no export (ou renomeá-los com as, mas falaremos disso depois).

Vantagens do export nomeado

\n
• Clareza: Você sempre vê exatamente o que está sendo exportado do módulo.
\n
• Autocompletar: A IDE (por exemplo, VS Code) sugere muito bem os nomes ao importar.
\n
• Refatoração: Se você renomear uma função exportada, a IDE renomeia em todos os lugares de import. É seguro.
\n
• Tree-shaking: Empacotadores (Webpack, Vite) podem "sacudir" o código não utilizado, reduzindo o tamanho do bundle final.
\n

Export padrão (default export) — conveniência e concisão

Export padrão é quando você diz: "Neste arquivo, há uma entidade principal, e quero que seja fácil importá-la". É como se você dissesse: "Aqui está meu cartão de visita, com tudo o que é essencial".

Cada módulo pode ter apenas um export padrão. Sintaxe:

Exemplo de export padrão

// logger.ts\nconst log = (message: string): void => {\n  console.log(`[LOG]: ${message}`);\n};\n\nexport default log;

Ou você pode declarar diretamente:

export default function log(message: string): void {\n  console.log(`[LOG]: ${message}`);\n}

O import fica assim (sem chaves!):

// main.ts\nimport myLog from '