Cómo Configurar un Proyecto de Node.js con TypeScript y Express

Configurar un proyecto de Node.js con TypeScript y Express proporciona a tu aplicación estructura, escalabilidad y claridad. En esta guía, recorreremos paso a paso la inicialización de tu proyecto Node.js, la integración de TypeScript, Express y la adición de herramientas esenciales para desarrolladores.

Paso 1: Inicializa Tu Proyecto Node.js

Crea tu carpeta de proyecto e inicializa npm:

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

Esto genera un package.json. A continuación, crea un .gitignore para excluir los módulos de node y archivos de compilación:

node_modules
dist

Paso 2: Añadir TypeScript

Instala TypeScript y dependencias relacionadas:

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

Crea tu configuración de TypeScript con:

npx tsc --init

Ajusta tu tsconfig.json para que se vea así:

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

Crea la carpeta src para tu código:

mkdir src

Paso 3: Configurar Express

Instala Express y sus tipos:

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

Crea un servidor básico en 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}`);
});

Ejecútalo usando:

npx ts-node src/index.ts

Paso 4: Configuración de ESLint y Prettier

Instala ESLint, Prettier y plugins:

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

Configura ESLint con .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 }
}

Crea .prettierrc.json:

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

Actualiza tus scripts en package.json:

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

Paso 5: Jest para Pruebas

Añade Jest y soporte para TypeScript:

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

Escribe una prueba simple src/__tests__/sum.test.ts:

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

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

Con el módulo correspondiente:

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

Actualiza package.json:

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

Paso 6: Nodemon para Desarrollo

Instala y configura nodemon:

npm install --save-dev nodemon

Añade nodemon.json:

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

Script para entorno de desarrollo en package.json:

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

Ejecuta npm run dev para recargar automáticamente tu servidor durante el desarrollo.

Mejores Prácticas

• Usa carpetas separadas (src para código, dist para salidas de compilación).
• Haz commit solo de archivos fuente, no de código compilado (dist) o módulos de node.
• Ejecuta npm run lint y npm run format con frecuencia.
• Compila el código (npm run build) antes del despliegue, luego inicia con npm start.

Preguntas Frecuentes