Trabajo con fechas y horas en TypeScript: de la A a la Z

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

Introducción: Por qué trabajar con fechas en TypeScript requiere atención especial



Trabajar con fechas y horas es una de las tareas más comunes y, al mismo tiempo, más engañosas en el desarrollo web. En TypeScript, que es una extensión fuertemente tipada de JavaScript, el objeto Date heredó todas las "maravillas" de su predecesor: meses no intuitivos (comenzando desde cero), mutabilidad de métodos y problemas con las zonas horarias. Sin embargo, utilizando la tipificación estricta y librerías modernas, puede escribir código seguro, predecible y legible para trabajar con el tiempo.



En este artículo, analizaremos todo lo que un desarrollador necesita saber: desde la creación básica de fechas hasta el trabajo avanzado con zonas horarias y formato. Aprenderá cómo evitar errores típicos y qué herramientas (integradas y de terceros) son las más adecuadas para proyectos TypeScript.



1. Fundamentos: El objeto Date y su tipificación en TypeScript



Creación y métodos básicos



En TypeScript, al igual que en JavaScript, se utiliza el objeto incorporado Date para trabajar con fechas. TypeScript proporciona tipos predefinidos para él, por lo que no se requieren definiciones adicionales.



// Creación de la fecha actualconst now: Date = new Date();console.log(now); // 2024-01-15T10:30:00.000Z

// Creación a partir de una cadena (ISO 8601)const specificDate: Date = new Date('2024-12-31T23:59:59');

// Creación a partir de componentes (año, mes [0-11], día, horas...)const birthday: Date = new Date(1990, 0, 15); // 15 de enero de 1990// Atención: ¡mes 0 = Enero!


Problema con la mutabilidad



Los métodos del objeto Date modifican el objeto original. Esto puede provocar errores inesperados. TypeScript no puede evitar esto a nivel de tipos, pero puede utilizar enfoques inmutables.



const date = new Date('2024-01-01');date.setDate(date.getDate() + 5); // ¡mutación! date ahora es 6 de enero// Mejor crear un nuevo objeto:const newDate = new Date(date.getTime() + 5 * 24 * 60 * 60 * 1000);


Tipificación de Unix Timestamp



A menudo, las fechas se transmiten como números (milisegundos desde 1970). Utilice un type alias para mayor claridad:



type UnixTimestamp = number;

function formatTimestamp(ts: UnixTimestamp): string { return new Date(ts).toISOString();}

const myTimestamp: UnixTimestamp = 1705315200000;console.log(formatTimestamp(myTimestamp));


2. Formato y análisis de fechas



Métodos de formato incorporados



JavaScript proporciona métodos básicos para la salida localizada. En TypeScript funcionan "de fábrica":



const date = new Date('2024-06-15T14:30:00');

// Cadenas localizadasconsole.log(date.toLocaleDateString('es-ES')); // "15/6/2024"console.log(date.toLocaleTimeString('en-US')); // "2:30:00 PM"console.log(date.toLocaleString('de-DE')); // "15.6.2024, 14:30:00"

// Cadena ISO (útil para API)console.log(date.toISOString()); // "2024-06-15T11:30:00.000Z" (siempre UTC)


Análisis de cadenas: peligros



Analizar cadenas mediante el constructor new Date(str) puede dar resultados inesperados en diferentes navegadores. Es mejor usar Date.parse() con una verificación explícita o librerías de terceros.



// Método poco fiableconst parsed = new Date('2024/01/15'); // puede funcionar de forma inestable

// Método fiable: ISO 8601const safeParse = (dateStr: string): Date | null => { const ts = Date.parse(dateStr); return isNaN(ts) ? null : new Date(ts);};

const result = safeParse('2024-01-15T10:00:00Z');if (result) { console.log(result.toISOString());}


3. Manipulaciones avanzadas y comparación



Comparación de fechas



Las fechas se pueden comparar directamente mediante operadores de comparación, pero para una comparación precisa (igualdad) es necesario convertirlas a número:



const date1 = new Date('2024-01-01');const date2 = new Date('2024-01-0                

Blogs

Book Recommendations