Como implementar relative paths com TypeScript
Published atNo mundo onde modularizar e distribuir traços de código virou padrão (não podemos esquecer do famoso caso da biblioteca de 11 linhas que causou um problema consideravelmente grande!), naturalmente vamos ter momentos onde teremos uma cadeia de imports seja de dependência ou de importação local grande demais, o que não consideravelmente é algo negativo, mas o problema começa quando pensamos em algo comum: refatorar.
Introdução
Imaginemos um caso de uso onde temos uma árvore de código simples similar a essa:
O arquivo src/screens/home/home.screen.ts têm o seguinte código:
1
2
3
4
5
import Hello from '../../components/hello';
import Service from '../../services/service';
import config from '../../config/constants';
function HomeScreen...Nada de novo e sem novidades, porém observando mais atenciosamente os paths das linhas 1, 2 e 3, estamos importando os arquivos de forma bastante manual, em caso de movermos um arquivo, ou uma pasta inteira para outro ponto da aplicação, teremos que manualmente importar cada arquivo, hoje não é um problema, mas imagine ter uma aplicação grande, com bastante arquivos, dependências... Ordenar um possível refactor seria no mínimo cansativo e pior ainda, estressante.
Existe solução?
Muitas soluções, desde auto-imports, plugins para identificar export/import, integrações para VSCode, Vim, etc. Porém são ferramentas adicionais e que dependem de um editor para funcionar, a ideia não é automatizar somente, mas sim, resolver o problema de escrever ou saber exatamente o caminho exato para um arquivo.
Para solucionar esse problema, vamos apenas adicionar 2 propriedades dentro do nosso arquivo tsconfig.json:
1
2
"moduleResolution":"node",
"baseUrl":"./src/"A propriedade moduleResolution é como vamos definir a estratégia de importação, onde nesse caso, os possíveis valores são: node ou classic sendo esse, o valor default. Quando com valor node as importações vão seguir o modelo base/relative, modelo comumente conhecido quando estamos importando algo que existe dentro da pasta node_modules, onde não necessitamos definir definir o node_modules/module e sim apenas o nome do modulo, sendo esse base o diretório que você define dentro da propriedade baseUrl, que define a pasta onde vão partir as importações.
No nosso caso, o valor de baseUrl foi configurado definir nossa pasta src/ logo, toda importação que você fizer dentro da aplicação, deve tomar conta que você vai estar fazendo referência desde a pasta ./src/ e não mais dentro do real path do arquivo que você está editando. Vejamos o mesmo exemplo do código de home.screen.ts para entender melhor:
1
2
3
4
5
import Hello from 'components/hello';
import Service from 'services/service';
import config from 'config/constants';
function HomeScreen ...Para cada arquivo que você importa, o compiler do typescript vai assignar o path escrito como o valor relativo do real path, assim completando o modelo comentado antes base/relative, onde o base é tomado dentro do baseUrl em momento de compilação. Assim apenas conseguimos resolver problema de importação sem mais ter que se preocupar se você assignou o arquivo certo, ou não esqueceu uma sequência de ../durante as importações.
Até a próxima! 😁
