Mapeamento de caminhos e resolução de módulos
Configure aliases de caminho com baseUrl/paths, entenda como TS resolve módulos e evite armadilhas comuns.
Mapeamento de caminhos e resolução de módulos é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 3 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 3 aulas no total.
Introdução
Objetivo: substituir importações relativas longas por aliases de caminho e compreender as regras de resolução de módulos do TypeScript para manter as importações limpas.
Caminhos no tsconfig
Defina baseUrl, a raiz do projeto para importações não relativas, e mapeie aliases em paths. As chaves podem usar curingas *.
// file: tsconfig.json (excerpt)
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@utils/*": ["utils/*"],
"@components/*": ["components/*"]
}
}
}Usar um alias
Importe usando o alias exatamente como declarado, por exemplo, @utils/date. O TypeScript resolve o caminho mapeado em src/.
// file: src/app.ts
import { formatDate } from "@utils/date";
import Button from "@components/Button";
console.log(formatDate(new Date()));
const btn = new Button();Estratégia de resolução
A resolução depende de module (Node, NodeNext, Bundler). TS verifica as extensões dos arquivos, exports/types em package.json e depois recorre a node_modules.
// Resolution order sketch (NodeNext/Node):
// 1) Exact file: .ts/.tsx/.d.ts/.js
// 2) Index files: index.ts / index.js
// 3) package.json exports / types
// 4) paths & baseUrl fallbacks
// 5) node_modules lookup (upwards)
export const note = "Resolution depends on module setting (Node, NodeNext, Bundler).";Alinhamento com o empacotador
Importante: o TS conhece os aliases para a verificação de tipos, mas seu empacotador/ambiente de execução também precisa mapeá-los, por exemplo, com Vite/Webpack/tsconfig-paths para ts-node.
// Example: vite.config.ts (alias for runtime)
import { defineConfig } from "vite";
import path from "path";
export default defineConfig({
resolve: {
alias: {
"@utils": path.resolve(__dirname, "src/utils"),
"@components": path.resolve(__dirname, "src/components")
}
}
});Dicas e armadilhas
Dicas:
- Mantenha baseUrl estável, por exemplo, em src/.
- Replique os aliases no empacotador/ambiente de execução.
- Evite cadeias profundas de ../..; prefira aliases concisos.
Verificação dos aliases de caminho
Verificação rápida: quais opções do tsconfig habilitam aliases de caminho como @utils/*?
Recapitulação
Recapitulação: configure baseUrl e paths para os aliases, aprenda a ordem de resolução do TS e alinhe o empacotador/ambiente de execução para evitar importações quebradas.
Perguntas Frequentes
A aula “Mapeamento de caminhos e resolução de módulos” é grátis?
Sim — o texto completo de “Mapeamento de caminhos e resolução de módulos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de TypeScript Academy, atualize para CoddyKit PRO. O curso de TypeScript Academy inclui 3 aulas no total.
O que vou aprender em “Mapeamento de caminhos e resolução de módulos”?
Configure aliases de caminho com baseUrl/paths, entenda como TS resolve módulos e evite armadilhas comuns. Você pratica TypeScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar TypeScript Academy?
Nenhuma experiência prévia é necessária. TypeScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 3.
Quanto tempo leva a aula “Mapeamento de caminhos e resolução de módulos”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de TypeScript Academy?
Sim. Cada aula de TypeScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Módulos ES (nomeados versus padrão), reexportações
- Declarações ambientais (.d.ts) e tipagens de terceiros
- Mapeamento de caminhos e resolução de módulos