This content originally appeared on DEV Community and was authored by Liandro Silva
Sumário
- Contexto
-
Preparando o terreno
- tsconfig.json
- Path Mapping
-
Configuração
- Configurando o tsconfig.json
- 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 comoNode
"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?
This content originally appeared on DEV Community and was authored by Liandro Silva
Liandro Silva | Sciencx (2022-07-11T21:09:54+00:00) Organizando importações no Nest.js. Retrieved from https://www.scien.cx/2022/07/11/organizando-importacoes-no-nest-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.