Formatear TypeScript

El código formateado

Aplicar el formateador al TypeScript minificado de arriba produce:

type ApiResponse<T> = {
  data: T;
  status: number;
  message: string;
  meta: {
    page: number;
    total: number;
    hasNext: boolean;
  };
};

interface User {
  id: number;
  name: string;
  email: string;
  role: "admin" | "user" | "guest";
  preferences: {
    theme: "light" | "dark";
    language: string;
  };
}

async function fetchUsers(
  page: number = 1,
): Promise<ApiResponse<User[]>> {
  const response = await fetch(`/api/users?page=${page}`);
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  return response.json();
}

function filterByRole<T extends User>(
  users: T[],
  role: T["role"],
): T[] {
  return users.filter((u) => u.role === role);
}

export type { ApiResponse, User };
export { fetchUsers, filterByRole };

Cada tipo queda en su propia declaración. Las interfaces tienen una propiedad por línea. Los parámetros de tipo genéricos se dividen en varias líneas cuando superan el ancho de impresión. Los miembros de union types se alinean en vertical para que se lean mejor.

Por qué importa formatear TypeScript

El código TypeScript es más denso que JavaScript por las anotaciones de tipo. El TypeScript sin formatear, con genéricos anidados, union types y mapped types, se vuelve ilegible más rápido que el JavaScript equivalente. Formatear facilita varias cosas:

Revisión de tipos. Cuando revisas una firma de función, necesitas ver cada parámetro y su tipo en su propia línea. Una pared de anotaciones de tipo en una sola línea hace imposible comprobar tipos individuales sin analizar la cadena a mano.

Refactorización. Cuando renombras un tipo o cambias una restricción genérica, el código formateado hace visible el cambio en el diff. En TypeScript minificado, el mismo cambio produce un diff que abarca toda la línea.

Documentación. El TypeScript formateado sirve como documentación. Una definición de interfaz bien formateada comunica la forma de una estructura de datos con más claridad que cualquier comentario.

Formateo específico de TypeScript

Prettier procesa las construcciones propias de TypeScript con las mismas reglas que el código JavaScript:

Anotaciones de tipo: se dividen en varias líneas cuando superan el ancho de impresión. Los tipos de parámetros de función, los tipos de retorno y las restricciones genéricas siguen las mismas reglas de salto de línea.

Interfaces y alias de tipos: una propiedad por línea. Los miembros de union types se pueden alinear en vertical cuando son lo bastante cortos. Las uniones discriminadas se formatean para que la propiedad discriminante quede bien visible.

Genéricos: los parámetros de tipo se dividen en varias líneas cuando son largos. Los genéricos multilínea indentan cada parámetro de tipo en su propia línea.

Enums: los miembros se formatean uno por línea. Los const enums siguen las mismas reglas.

Prettier vs. ESLint para TypeScript

Prettier formatea código. ESLint detecta errores e impone buenas prácticas. Tienen propósitos distintos y se complementan. Una configuración común:

1. Usa Prettier para todo el formato (punto y coma, comillas, indentación, saltos de línea)
2. Usa @typescript-eslint para linting con conocimiento de tipos (no-unused-vars, no-explicit-any, prefer-optional-chain)
3. Desactiva las reglas de ESLint que chocan con Prettier (indent, semi, quotes)
4. Ejecuta primero Prettier y luego ESLint, para que ESLint pueda corregir lo que Prettier no procesa

Esta separación te da formato consistente con Prettier y controles de calidad de código con ESLint sin que ninguna herramienta pelee con la otra.