TypeScript: path mappings

Depois de trabalhar em alguns projetos compartilhados em Angular e TypeScript com Node.js, notei que o pessoal está desenvolvendo muitos pacotes, módulos … etc e para importar eles estão utilizando algo como:

import { meupacote} from '../meupacote'

A principio nós temos dois problemas quando utilizamos o import dessa forma:

1º Dificuldade em refatorar, fica ruim navegar até eles para dar manutenção.

2º No caso de subir no NPM, teremos que alterar todos esses apontamentos, para que esse pacote ou modulo possa subir sem erros. Caso tenha interesse em saber como subir um módulo no NPM, eu recomendo a leitura desse artigo: Publicando módulo no NPM.

Depois de ler um pouco mais a documentação do TypeScript, eu achei o path mapping, ele nós possibilita criar apontamentos como esse do exemplo abaixo:

import { meupacote } from '@datorama/meupacote'

Bem melhor não? Dessa forma o compilador do TypeScript verifica os paths configurados no arquivo tsconfig e não precisamos mais adicionar o ‘./’.

Para que você possa ter um melhor entendimento, veja abaixo um exemplo dessa configuração em um app Angular.

Como essa será uma configuração simples, eu irei utilizar um projeto já criado com o Angular Cli. Caso queira baixar ele, segue o seu link no GitHub: Angular-pathMapping.

Esse é um projeto scaffold do Angular Cli, que foi atualizado com dois diretórios: 1 de pipes e outro de services. Você pode ver essa estrutura na imagem abaixo:

Project scaffold (Angular Cli)

Agora para demonstrar como o path mapping funciona, eu irei adicionar o pipe e o service nos providers do arquivo AppModule. Você pode ver o resultado na imagem abaixo:

Note que ele esta puxando com ‘./’, dessa forma iremos cair no fluxo apresentado no inicio desse artigo. Para utilizar o path mapping, atualize o seu arquivo tsconfig.json com o seguinte trecho de código:

"baseUrl": "./src",
"paths": {
"@datorama/services/*": ["app/services/*"],
"@datorama/pipes/*": ["app/pipes/*"]
},

Acima estamos passando:

BaseUrl: diretório base que o compilador deve percorrer para encontrar os outros caminhos que devemos passar em paths. No nosso exemplo, estamos pedindo para ele percorrer os diretórios pipes e services.

Com essa atualização, você pode alterar o ./ por @datorama. Veja na imagem abaixo o arquivo AppModule com essa alteração.

Para finalizar, vamos criar um serviço que fique em um nível mais baixo do nosso diretório services. Para isso, execute o seguinte comando no seu terminal:

ng g s services/servicedir1/servicedir2/servicedir3/userpathhelp

A execução dele irá criar a seguinte estrutura:

Agora para importar ele, basta seguir o exemplo acima e ao invés de ../ utilizar o @datorama.

Bom, esse foi somente um exemplo simples de como podemos organizar o nosso código, espero que tenha ajudado e até um próximo artigo ;)