TypeScript 中日期与时间的高级处理

轻松学习Python，无需理论负担。在浏览器中直接解决带自动检查的实践任务，无需安装任何东西。

TypeScript 中日期与时间的高级处理

日期与时间处理是 Web 开发中最常见也最复杂的任务之一。在 TypeScript 中，借助严格的类型化，我们可以避免许多与日期操作相关的错误，但标准的 Date 对象存在一些局限性。本文将探讨日期与时间处理的高级方法，包括使用现代库、类型化、时区处理以及复杂格式的解析。

1. 原生 `Date` 的问题及其在 TypeScript 中的解决方案

JavaScript 中的标准 Date 对于复杂操作极为不便：

可变性：像 setDate() 这样的方法会修改原始对象。
缺乏格式化：没有内置方法可以将日期输出为 "DD.MM.YYYY" 格式。
时区处理薄弱：Date 以 UTC 存储时间，而 getHours() 等方法返回的是本地时间。
解析问题：new Date("2023-01-01") 在不同浏览器中可能被不同地解释。

TypeScript 通过允许我们创建包装器和工具函数来提供帮助。例如，我们可以为格式化定义严格的类型：

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 '';  }}

// 使用示例const now = new Date();console.log(formatDate(now, 'DD.MM.YYYY')); // "15.10.2023"

这种方法确保我们不会向函数传递错误的格式，因为 TypeScript 会在编译阶段检查类型。

2. 使用 date-fns 库：简洁与功能性

date-fns 是一个现代化的日期处理库，非常适合 TypeScript。其主要优势包括：

不可变性：所有函数都返回新对象，不会修改原始对象。
模块化：您只导入所需的函数，从而减小打包体积。
类型化：该库内置了对 TypeScript 的支持。

安装：

npm install date-fns

高级使用示例：

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

// 格式化const date = new Date(2023, 9, 15); // 2023年10月15日console.log(format(date, 'dd.MM.yyyy')); // "15.10.2023"console.log(format(date, 'EEEE, MMMM do yyyy')); // "Sunday, October 15th 2023"

// 算术运算const nextWeek = addDays(date, 7);console.log(format(nextWeek, 'dd.MM.yyyy')); // "22.10.2023"

// 日期差const startDate = new Date(2023, 0, 1);const endDate = new Date(2023, 11, 31);const diff = differenceInDays(endDate, startDate);console.log(diff); // 364

// 检查周末console.log(isWeekend(date)); // true (星期日)

// 解析 ISO 字符串const parsed = parseISO("2023-10-15T10:30:00Z");console.log(format(parsed, 'HH:mm')); // "13:30" (考虑时区)

重要提示：date-fns 操作 Date 对象，因此