Organizando importações no Nest.js

Liandro Silva — Mon, 11 Jul 2022 21:09:54 +0000

Sumário

Contexto
Preparando o terreno
1. tsconfig.json
2. Path Mapping
Configuração
1. Configurando o tsconfig.json
2. Configurando o diretório shared
Conclusão

Contexto

Estive praticando bastante Nest.js com um pequeno projeto pessoal. No meio do desenvolvimento, o fato de tanto o Auto Import ou mesmo as importações manuais que eu fazia gerarem códigos muito compridos e bagunçados, como no exemplo abaixo, me incomodava bastante.

import { Anything } from '../../../shared/anything.ts';

Na prática quando isso se mistura com Services, Controllers, Interceptors e muitas outras coisas, nós temos uma verbosidade muito grande para coisas muito simples e que podem, inclusive, atrapalhar em um processo futuro de leitura do código. Então eu fiquei pensando:

Como eu poderia organizar as minhas importações para obter algo bem mais semântico e organizado?

Felizmente, sanei minha dúvida e é sobre isso que quero dissertar aqui nesta publicação!

Preparando o terreno

Antes de começarmos quaisquer configuração é importante que você entenda, de maneira geral, o que vamos ver, por isso, neste tópico, vamos passar pela definição de cada arquivo que vamos manipular.

tsconfig.json

o arquivo tsconfig.json é responsável por especificar as configurações que serão aplicadas na compilação de nosso projeto.

Este arquivo sempre estará localizado na raíz de seu projeto.

Path Mapping

O TypeScript tem suporte ao mapeamento de paths. Esta ferramenta, nos permite definir keywords que servirão de atalhos para um caminho específico dentro da nossa aplicação, em outras palavras, nós conseguimos ter um resultado como este abaixo:

import { Anything } from '@shared';

Isso confere a nossa aplicação uma organização absurda, além de facilitar a leitura do código.

Configuração

Neste tópico iremos aplicar de fato toda configuração necessária para alcançarmos nosso objetivo.

Configurando o tsconfig.json

Dentro do arquivo tsconfig.json, insira a propriedade moduleResolution e defina seu valor como Node

"moduleResolution": "Node"

Dentro do arquivo tsconfig.json, insira a propriedade baseUrl e defina seu valor como .
Dentro do arquivo tsconfig.json, insira a propriedade paths, como no exemplo abaixo:

"paths": {
  "@shared": ["./src/shared/index"]
}

Ao final, teremos essa configuração:

"moduleResolution": "Node",
"baseUrl": ".",
"paths": {
  "@shared": ["./src/shared/index"]
}

O que nós fizemos foi possibilitar que ao usarmos a notação import from {} from "@shared" o compilador consiga entender que na verdade nós estamos apontando para ./src/shared/index.

Entenda que este é apenas um exemplo, adapte para sua necessidade, ok?

Configurando o diretório shared

Agora que configuramos todo nosso arquivo tsconfig.json, precisamos agora adequar nosso diretório a estrutura desejada, vamos lá!

Primeiro, certifique-se de ter o nosso diretório shared de exemplo dentro do diretório src com a formatação correta, como no exemplo abaixo:

shared
├── index.ts
├── anyfile.ts
├── anyfolder
│   └── index.ts

O que nós devemos entender agora é que podemos ter N arquivos e diretórios dentro de shared, porém, cada diretório dentro de shared deve conter um index responsável por exportar os arquivos alocados dentro de si, vamos para um exemplo mais claro.

dentro do diretório anyfolder crie um arquivo chamado anyfile.ts, dentro deste arquivo insira o código abaixo:

export class AnyClass {
 constructor(){}
 public anyMethod() {
   return 'Any value';
 }
}

agora, ainda no diretório anyfolder crie um arquivo chamado index.ts, dentro deste arquivo insira o código abaixo:

import { AnyClass } from './anyfolder';
import { Anyfile  } from './anyfile';

export { AnyClass, Anyfile }

Tudo pronto, agora, você pode importar de qualquer lugar da aplicação a classe AnyClass simplesmente fazendo isso

import { AnyClass } from '@shared';

Conclusão

Ao final desta publicação espero que tenha ficado claro a forma como você pode organizar todas as importações de suas aplicação. Vale ressaltar que este formato apresentado não é bala de prata, adapte para sua necessidade. Se restar alguma dúvida, por favor, poste aqui nos comentários, ficarei feliz em ajudar você!

Se este artigo foi útil para você, com certeza pode ser para muitas outras pessoas, o que acha de compartilhar com amigos e grupos?

DEV Community: Liandro Silva