Template Literal Types y satisfies

Los Template Literal Types son como los template strings de JavaScript (con backticks) pero para tipos. Permiten construir tipos de string combinando otros tipos: si tienes type Evento = "click" | "focus", puedes crear type Handler = `on${Capitalize<Evento>}` y obtienes exactamente "onClick" | "onFocus". Esto es muy útil para garantizar consistencia de nomenclatura en todo el proyecto: nombres de rutas, nombres de eventos, valores CSS.

El operador satisfies (introducido en TypeScript 4.9) resuelve un problema concreto: quieres validar que un objeto cumple un tipo sin perder la inferencia específica de sus valores. Con una anotación de tipo normal (const config: Record<string, unknown> = {...}), TypeScript olvida que config.puerto es un number específico y lo trata como unknown.

Con satisfies, valida la estructura pero conserva que puerto es number, host es string, etc., dándote seguridad de tipos y autocompletado completo.

// Template Literal Types
type Evento = "click" | "focus" | "blur" | "change";
type Handler = `on${Capitalize<Evento>}`;
// = "onClick" | "onFocus" | "onBlur" | "onChange"

type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
type Endpoint = `/api/${string}`;
type Route = `${HTTPMethod} ${Endpoint}`;
// Ej: "GET /api/users", "POST /api/auth/login"

type CSSUnit = "px" | "rem" | "em" | "%";
type CSSValue = `${number}${CSSUnit}`;
const ancho: CSSValue = "100px"; // OK
// const alto: CSSValue = "50vh"; // Error: "vh" no es CSSUnit

// satisfies — valida tipo SIN perder inferencia específica
const config = {
  puerto: 3000,
  db: { host: "localhost", nombre: "mydb" },
  features: ["auth", "cors"],
} satisfies Record<string, unknown>;

config.puerto.toFixed(2); // OK — TypeScript sabe que es number
config.db.host.toUpperCase(); // OK — TypeScript sabe que es string
// Sin satisfies y con anotación, sería unknown

// Diferencia as vs satisfies
const a = { x: 1 } as { x: number | string };
a.x.toFixed(); // Error — x es number | string

const b = { x: 1 } satisfies { x: number | string };
b.x.toFixed(); // OK — TypeScript infiere number