Skip to main content

TSConfig Paths

  • TSConfig Paths

Quando você está utilizando ts-node-dev com tsconfig-paths, o objetivo é permitir que o Node.js e o TypeScript compreendam os aliases de caminho configurados no seu tsconfig.json. Isso facilita o uso de caminhos curtos e organizados no seu código, em vez de caminhos relativos longos e confusos.

Aqui está um guia detalhado de como configurar isso corretamente:

1. package.json

Você precisa instalar as seguintes dependências:

npm install ts-node-dev tsconfig-paths --save-dev

Uma vez instalados, adicione um script de execução no seu package.json para rodar o ts-node-dev com o suporte ao tsconfig-paths:

{
"scripts": {
"dev": "ts-node-dev --respawn -r tsconfig-paths/register src/index.ts"
},
"devDependencies": {
"ts-node-dev": "^2.0.0",
"tsconfig-paths": "^4.0.0",
"typescript": "^5.0.0"
}
}

Aqui está o que cada parte desse comando faz:

  • ts-node-dev: executa a aplicação com reinicialização automática.
  • --respawn: garante que o processo seja completamente reiniciado após falhas, útil durante o desenvolvimento.
  • -r tsconfig-paths/register: usa o módulo tsconfig-paths para registrar os caminhos e fazer o mapeamento de paths do tsconfig.json funcionar em tempo de execução.
  • src/index.ts: o arquivo principal da sua aplicação, substitua conforme a estrutura do seu projeto.

2. tsconfig.json

O arquivo tsconfig.json deve estar configurado para incluir os paths (aliases) e o baseUrl, que é a raiz a partir da qual os caminhos relativos são resolvidos.

Aqui está um exemplo de como configurar:

{
"compilerOptions": {
"target": "ES2020",
"module": "CommonJS",
"baseUrl": "./src",
"paths": {
"@models/*": ["models/*"],
"@controllers/*": ["controllers/*"],
"@utils/*": ["utils/*"]
},
"outDir": "./dist",
"esModuleInterop": true,
"skipLibCheck": true,
"strict": true
},
"include": ["src/**/*.ts"],
"exclude": ["node_modules"]
}
  • baseUrl: define a base de onde os caminhos relativos começam. Aqui está definido como ./src, o que significa que todos os caminhos são relativos à pasta src.
  • paths: define aliases para diretórios específicos, como @models para facilitar a importação dos arquivos. Exemplo: em vez de ../../models/User.ts, você pode usar @models/User.

3. Estrutura dos arquivos

Aqui está um exemplo de como a estrutura dos arquivos ficaria após configurar corretamente o tsconfig.json e o package.json:

├── package.json
├── tsconfig.json
├── src
│ ├── index.ts
│ ├── models
│ │ └── User.ts
│ ├── controllers
│ │ └── UserController.ts
│ └── utils
│ └── logger.ts
└── node_modules

4. Exemplo de uso nos arquivos TypeScript

Com essa configuração, você pode importar módulos usando os aliases definidos no tsconfig.json. Aqui está um exemplo de como você pode fazer isso:

src/index.ts

import { User } from '@models/User';
import { UserController } from '@controllers/UserController';
import { logger } from '@utils/logger';

logger.info('App is starting...');
const userController = new UserController(new User());

src/models/User.ts

export class User {
name: string;

constructor(name: string = 'Default User') {
this.name = name;
}
}

src/controllers/UserController.ts

import { User } from '@models/User';

export class UserController {
constructor(private user: User) {}

getUserName(): string {
return this.user.name;
}
}

src/utils/logger.ts

export const logger = {
info: (message: string) => console.log(`[INFO] ${message}`),
};

5. Executando o projeto

Agora, com tudo configurado, você pode rodar o seu projeto com o seguinte comando:

npm run dev

O ts-node-dev irá carregar os paths do tsconfig.json corretamente e aplicar o hot-reload sempre que você alterar algum arquivo.

Conclusão

Ao combinar o ts-node-dev com o tsconfig-paths, você ganha a vantagem de usar caminhos organizados e facilmente legíveis no seu código TypeScript, além de aproveitar o ciclo de feedback rápido com hot-reloading. O tsconfig-paths resolve os aliases configurados no tsconfig.json, permitindo que você use os caminhos curtos sem complicações.