Como Configurar um Projeto Node.js com TypeScript e Express

Configurar um projeto Node.js com TypeScript e Express dá à sua aplicação estrutura, escalabilidade e clareza. Neste guia, vamos percorrer passo a passo a inicialização do seu projeto Node.js, integrando TypeScript, Express e adicionando ferramentas essenciais para desenvolvedores.

Passo 1: Inicialize Seu Projeto Node.js

Crie sua pasta de projeto e inicialize o npm:

mkdir my-node-project
cd my-node-project
npm init -y

Isso gera um package.json. Em seguida, crie um .gitignore para excluir módulos node e arquivos de compilação:

node_modules
dist

Passo 2: Adicione TypeScript

Instale o TypeScript e dependências relacionadas:

npm install --save-dev typescript ts-node @types/node

Crie sua configuração TypeScript com:

npx tsc --init

Ajuste seu tsconfig.json para ficar assim:

{
  "compilerOptions": {
    "target": "ES2016",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./dist",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true
  }
}

Crie a pasta src para seu código:

mkdir src

Passo 3: Configure o Express

Instale o Express e seus tipos:

npm install express
npm install --save-dev @types/express

Crie um servidor básico em src/index.ts:

import express, { Application, Request, Response } from 'express';

const app: Application = express();
const PORT = 3000;

app.get('/', (req: Request, res: Response) => {
  res.send('Hello, TypeScript + Express!');
});

app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

Execute-o usando:

npx ts-node src/index.ts

Passo 4: Configuração do ESLint e Prettier

Instale ESLint, Prettier e plugins:

npm install --save-dev eslint prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-prettier eslint-config-prettier

Configure o ESLint com .eslintrc.json:

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "env": { "node": true, "es6": true, "jest": true }
}

Crie .prettierrc.json:

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all"
}

Atualize seus scripts no package.json:

"scripts": {
  "lint": "eslint 'src/**/*.{ts,js}'",
  "format": "prettier --write ."
}

Passo 5: Jest para Testes

Adicione Jest e suporte a TypeScript:

npm install --save-dev jest ts-jest @types/jest
npx ts-jest config:init

Escreva um teste simples src/__tests__/sum.test.ts:

import { sum } from '../sum';

test('sum works', () => {
  expect(sum(1, 2)).toBe(3);
});

Com o módulo correspondente:

export function sum(a: number, b: number): number {
  return a + b;
}

Atualize o package.json:

"scripts": {
  "test": "jest --watch"
}

Passo 6: Nodemon para Desenvolvimento

Instale e configure o nodemon:

npm install --save-dev nodemon

Adicione nodemon.json:

{
  "watch": ["src"],
  "ext": "ts,json",
  "ignore": ["src/**/*.test.ts"],
  "exec": "ts-node ./src/index.ts"
}

Script para ambiente de desenvolvimento no package.json:

"scripts": {
  "dev": "nodemon"
}

Execute npm run dev para recarregar automaticamente seu servidor durante o desenvolvimento.

Melhores Práticas

• Use pastas separadas (src para código, dist para saídas de compilação).
• Faça commit apenas de arquivos fonte, não de código compilado (dist) ou módulos node.
• Execute npm run lint e npm run format com frequência.
• Compile o código (npm run build) antes da implantação e, em seguida, inicie com npm start.

Perguntas Frequentes