Absolute Import com Typescript

Boas meus devs de todo brasil, vamos aprender uma coisa muito pratica hoje?

Vamos acabar com esse nosso hell de ‘../../../../file’, e para acabar com isso vamos usar uma técnica chamada absolute import.

Vamos dar uma recapitulada nos Imports.

Tudo começou com o ECMAScript 2015, quando o Javascript adicionou o conceito de modules. Então o TypeScript adotou este conceito também.

Módulos são executados no próprio escopo e não no global da nossa aplicação, isto implica que nossas variáveis, funções, classes e todo o mundo que existe dentro disso, são visíveis somente dentro do nosso modulo, a menos que exportemos eles usando nossa palavrinha chave export, então este modulo deve ser importado dentro de onde queremos usar, com nosso clássico import.

Você já deve ter percebido isso pois claro você é um programador sagaz e lê as documentações, opa… você não leu? poxa… mas blz ta aqui o link para ler mais sobre.

Mas quem já vive nesse mundo dos imports se viu enfrentando aplicações com estes códigos:

Bom nosso problema não é considerado um “problema” por muitos, mas particularmente acho pouco elegante usar os importes desta forma, gostaria de usar meus imports mostrando o caminho e não com esses “../”, e tem como?

É claro que tem né devs, então agora sim vamos começar a parte boa de configurar nosso projeto.

Depois dessa configuração não quero mais ver ninguém usando os relatives imports em!

Vamos deixar nosso código assim:

Elegante não é? 🐱‍💻😉

Vamos configurar nosso ambiente.

Antes de tudo precisamos configurar um projeto com o NPM e instalar nosso Typescript globalmente, então vamos executar os seguintes comandos.

npm i -g typescript > isto instala o typescript globalmente

Agora após criar uma pasta para nosso projeto e executar

npm init -y > o npm init -y vai dar yes para todas as perguntas

Caso queira depois mudar algo nas respostas do npm init basta editar o package.json

Agora vamos configurar nosso tslint

npm i -g tslint > instalamos globalmente nosso tslint

Agora dentro da pasta do projeto executamos

tslint --init > cria um arquivo de configuração básica

Bom agora já devemos ter dentro de nossa pasta os arquivos “package.json” e o “tsconfig.json”, vamos abrir nosso “tsconfig” e a configuração que eu uso são essas:

Analisando este arquivos podemos perceber que temos nossa “baseURL ”com o valor de “src”, e nossa variável “paths” também com seu valor.

BaseURL: é o diretório base para resolver módulos (imports) com o nome que não esteja absoluto.

Paths: São os locais que dizemos para nosso tsc para olhar usando nossa baseurl para gerar a localização relativa.

Bom se executarmos tsc no terminal ele vai gerar uma pasta build com os arquivos em javascript que podem ser executados, mas ainda não temos estes arquivos, então vamos criar as seguintes pastas:

├───src
    ├───app
         ├───index.ts
    └───index.ts

O código de cada arquivo deve conter o seguinte:

src/index.ts

src/app/index.ts

Agora se executarmos o tsc ele vai gerar os arquivos, os execute com o node, possivelmente apresentou um erro, vamos corrigir e acrescentar nosso nodemon.

Vamos instalar o pacote npm chamado module-alias.

npm i --save module-alias

Agora dentro do nosso arquivo package.json vamos adicionar as seguintes linhas:

"_moduleAliases": {
   "@": "build"
}

Dentro do nosso index.ts principal ou seja dentro da pasta /src/ vamos deixar o arquivo desta forma

Note que apenas importamos o module-alias

Agora caso você execute tsc para gerar a build seus arquivos já vão estar funcionando perfeitamente, mas como bônus também vou deixar a configuração funcionando com nodemon pois ninguém merece ficar dando build durante o desenvolvimento.

Para instalar o nodemon:

npm i --save-dev nodemon

Agora dentro do nosso arquivo package.json vamos adicionar a linha dentro do script:

"scripts": {
   "dev": "nodemon -r module-alias/register src/index.ts"
}

Agora basta executar npm run dev que tudo deve estar funcionando perfeitamente junto com absolute imports!

OBS: o @ de pode ser mudado para o valor que você quiser basta também mudar no tsconfig.json