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 😉

Compartilhe:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Table of Contents

Postagens Relacionadas

SaferatHome

Safer at Home

Safer at Home 26/02/2021(US) – Filmes – 0h 0min –   Nota: 0/10   Sinopse     Elenco Mais informações Título Original Safer at Home
SouLunaOUltimoShow

Sou Luna: O Último Show

O elenco de “Sou Luna” se apresenta ao vivo pela última vez no mítico estádio Luna Park em Buenos Aires. Vamos acompanhá-los na intimidade dos bastidores e r…
Chansondouce

Chanson douce

Chanson douce () – Drama, Crime – 1h 40min –   Nota: 6/10   Sinopse     Elenco Leïla Bekhti Como – Myriam Karin Viard
OutpostInfernoNegro

Outpost 2: Inferno Negro

O ano é 1945, 2ª Guerra Mundial, e um cientista alemão de nome Klausener está trabalhando em uma tecnologia nova e assustadora que tem o poder de criar um ex…