Trabajo avanzado con fechas y horas en TypeScript

Entrenador de Python en Línea para Principiantes

Aprende Python fácilmente sin sobrecargarte de teoría. Resuelve tareas prácticas con verificación automática, recibe pistas y escribe código directamente en el navegador, sin instalar nada.

Start Course

Trabajo avanzado con fechas y horas en TypeScript

Trabajar con fechas y horas es una de las tareas más comunes y, al mismo tiempo, complejas en el desarrollo web. En TypeScript, gracias al tipado estricto, podemos evitar muchos errores relacionados con la manipulación de fechas, pero el objeto estándar Date tiene una serie de limitaciones. En este artículo, exploraremos enfoques avanzados para trabajar con fechas y horas, incluyendo el uso de librerías modernas, tipado, manejo de zonas horarias y análisis de formatos complejos.

1. Problemas del `Date` nativo y su solución con TypeScript

El Date estándar en JavaScript es extremadamente incómodo para operaciones complejas:

Mutabilidad: métodos como setDate() modifican el objeto original.
Falta de formateo: no hay una forma integrada de mostrar una fecha en el formato "DD.MM.YYYY".
Manejo deficiente de zonas horarias: Date almacena la hora en UTC, y los métodos getHours() devuelven la hora local.
Problemas con el análisis: new Date("2023-01-01") puede interpretarse de manera diferente en distintos navegadores.

TypeScript ayuda permitiéndonos crear envoltorios y utilidades. Por ejemplo, podemos definir tipos estrictos para el formateo:

type DateFormat = 'DD.MM.YYYY' | 'YYYY-MM-DD' | 'HH:mm:ss';

function formatDate(date: Date, format: DateFormat): string {  const day = String(date.getDate()).padStart(2, '0');  const month = String(date.getMonth() + 1).padStart(2, '0');  const year = date.getFullYear();  const hours = String(date.getHours()).padStart(2, '0');  const minutes = String(date.getMinutes()).padStart(2, '0');  const seconds = String(date.getSeconds()).padStart(2, '0');

  switch (format) {    case 'DD.MM.YYYY':      return `${day}.${month}.${year}`;    case 'YYYY-MM-DD':      return `${year}-${month}-${day}`;    case 'HH:mm:ss':      return `${hours}:${minutes}:${seconds}`;    default:      return '';  }}

// Usoconst now = new Date();console.log(formatDate(now, 'DD.MM.YYYY')); // "15.10.2023"

Este enfoque garantiza que no pasemos un formato incorrecto a la función, ya que TypeScript verificará el tipo en tiempo de compilación.

2. Uso de la librería date-fns: limpieza y funcionalidad

date-fns es una librería moderna para trabajar con fechas que se adapta perfectamente a TypeScript. Sus principales ventajas:

Inmutabilidad: todas las funciones devuelven nuevos objetos sin modificar los originales.
Modularidad: importa solo las funciones que necesitas, lo que reduce el tamaño del bundle.
Tipado: la librería tiene soporte integrado para TypeScript.

Instalación:

npm install date-fns

Ejemplos de uso avanzado:

import { format, addDays, differenceInDays, isWeekend, parseISO } from 'date-fns';

// Formateoconst date = new Date(2023, 9, 15); // 15 de octubre de 2023console.log(format(date, 'dd.MM.yyyy')); // "15.10.2023"console.log(format(date, 'EEEE, MMMM do yyyy')); // "Sunday, October 15th 2023"

// Aritméticaconst nextWeek = addDays(date, 7);console.log(format(nextWeek, 'dd.MM.yyyy')); // "22.10.2023"

// Diferencia entre fechasconst startDate = new Date(2023, 0, 1);const endDate = new Date(2023, 11, 31);const diff = differenceInDays(endDate, startDate);console.log(diff); // 364

// Verificar si es fin de semanaconsole.log(isWeekend(date)); // true (domingo)

// Análisis de cadena ISOconst parsed = parseISO("2023-10-15T10:30:00Z");console.log(format(parsed, 'HH:mm')); // "13:30" (considerando la zona horaria)

Importante: date-fns trabaja con objetos Date, por lo