ESLint + TS: linting que entiende los tipos

El compilador de TypeScript caza errores de TIPOS. ESLint caza problemas de ESTILO y patrones peligrosos. Juntos —con typescript-eslint— forman un linting que ENTIENDE los tipos, atrapando cosas que ninguno ve por separado: una promesa sin await, un any que se coló, una comparación que siempre es falsa. La última pieza del entorno profesional.

Dos inspectores con especialidades distintas

Qué caza cada uno

Configurar typescript-eslint

typescript-eslint es el puente que le enseña a ESLint a entender TypeScript. Se instala y se configura con los presets recomendados:

pnpm add -D eslint typescript-eslint

import tseslint from "typescript-eslint";

export default tseslint.config(
...tseslint.configs.recommended,          // reglas base para TS
...tseslint.configs.recommendedTypeChecked, // reglas que USAN información de tipos
{
  languageOptions: {
    parserOptions: {
      projectService: true,   // conecta ESLint con tu tsconfig (para type-aware)
    },
  },
},
);

La clave es recommendedTypeChecked: activa reglas que consultan el SISTEMA DE TIPOS del proyecto, no solo el texto del código. Eso requiere conectar ESLint con tu tsconfig (vía projectService), y es lo que desbloquea la magia —reglas que "saben" los tipos.

Las reglas type-aware que valen oro

Estas reglas solo son posibles PORQUE ESLint conoce los tipos, y cazan bugs que un linter normal jamás vería:

// no-floating-promises: una promesa sin await ni .then (un bug asíncrono clásico):
async function guardar() { /* ... */ }
guardar();
// ⚠️ ESLint: Promises must be awaited. → probablemente olvidaste el await

// no-misused-promises: pasar una función async donde se espera una síncrona:
if (await esValido()) {}   // ✓
// element.addEventListener("click", async () => {...})  → ESLint avisa de los riesgos

// no-unnecessary-condition: una condición que SIEMPRE es verdadera/falsa según los tipos:
const nombre: string = "Sara";
if (nombre) {}   // ⚠️ ESLint: 'nombre' siempre es truthy (es un string no-opcional)

// no-explicit-any: te avisa (o prohíbe) los 'any' explícitos que apagan la seguridad

Mini-reto

Monta el linting pro (en un proyecto TS): 1) instala eslint typescript-eslint y crea un eslint.config.js con recommendedTypeChecked y projectService: true; 2) escribe una función async y llámala SIN await, luego corre ESLint y observa el aviso de no-floating-promises; 3) agrega el await y confirma que el aviso desaparece. Acabas de activar el segundo inspector de tu obra.

Qué sigue

Cierras el módulo con un reto de configuración: auditar y corregir el tsconfig y el setup de linting de un proyecto con problemas —el trabajo real de poner a punto un entorno. Luego, el módulo 10 cierra el supercurso con proyectos y los diez type-challenges que consolidan todo lo que sabes.