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ódulotsconfig-pathspara registrar os caminhos e fazer o mapeamento de paths dotsconfig.jsonfuncionar 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 à pastasrc.paths: define aliases para diretórios específicos, como@modelspara 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.