Trabalho Avançado com Datas e Horas em TypeScript

Trabalho Avançado com Datas e Horas em TypeScript

Trabalhar com datas e horas é uma das tarefas mais comuns e, ao mesmo tempo, complexas no desenvolvimento web. Em TypeScript, graças à tipagem estrita, podemos evitar muitos erros relacionados à manipulação de datas, mas o objeto padrão Date tem uma série de limitações. Neste artigo, exploraremos abordagens avançadas para trabalhar com datas e horas, incluindo o uso de bibliotecas modernas, tipagem, manipulação de fusos horários e parsing de formatos complexos.

1. Problemas do Date nativo e sua solução com TypeScript

O Date padrão em JavaScript é extremamente inconveniente para operações complexas:

• Mutabilidade: métodos como setDate() alteram o objeto original.
• Falta de formatação: não há uma maneira nativa de exibir uma data no formato "DD.MM.YYYY".
• Trabalho fraco com fusos horários: Date armazena a hora em UTC, e métodos como getHours() retornam a hora local.
• Problemas com parsing: new Date("2023-01-01") pode ser interpretado de forma diferente em navegadores distintos.

TypeScript ajuda, permitindo-nos criar wrappers e utilitários. Por exemplo, podemos definir tipos estritos para formatação:

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"

Essa abordagem garante que não passaremos um formato inválido para a função, pois o TypeScript verificará o tipo em tempo de compilação.

2. Usando a biblioteca date-fns: pureza e funcionalidade

date-fns é uma biblioteca moderna para trabalhar com datas, ideal para TypeScript. Suas principais vantagens:

• Imutabilidade: todas as funções retornam novos objetos, sem modificar os originais.
• Modularidade: você importa apenas as funções necessárias, reduzindo o tamanho do bundle.
• Tipagem: a biblioteca possui suporte nativo a TypeScript.

Instalação:

npm install date-fns

Exemplos de uso avançado:

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

// Formataçãoconst date = new Date(2023, 9, 15); // 15 de outubro 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"

// Diferença entre datasconst startDate = new Date(2023, 0, 1);const endDate = new Date(2023, 11, 31);const diff = differenceInDays(endDate, startDate);console.log(diff); // 364

// Verificação de fim de semanaconsole.log(isWeekend(date)); // true (domingo)

// Parsing de string ISOconst parsed = parseISO("2023-10-15T10:30:00Z");console.log(format(parsed, 'HH:mm')); // "13:30" (considerando o fuso horário)

Importante: date-fns trabalha com objetos Date, port