TypeScript 日期与时间处理完全指南

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

在TypeScript中处理日期和时间：从基础到进阶技巧

处理日期和时间是Web开发中最常见的任务之一。TypeScript作为JavaScript的超集，继承了内置的Date对象，并为其添加了严格的类型检查。在本文中，我们将探讨如何在TypeScript中高效处理日期：从创建和格式化到时区的复杂操作。您将学习如何避免常见错误，使代码更可靠、更易读。

基础：创建日期和基本操作

TypeScript中的Date对象与JavaScript中的相同，但具有更好的类型支持。让我们看看创建日期的主要方法：

// 当前日期和时间
const now: Date = new Date();

// 从字符串创建（ISO 8601格式）
const specificDate: Date = new Date('2024-12-25T10:30:00Z');

// 从组件创建（年、月（0-11）、日、时、分、秒）
const customDate: Date = new Date(2024, 11, 25, 10, 30, 0); // 2024年12月25日

// 从毫秒数创建（Unix时间戳）
const fromTimestamp: Date = new Date(1703493000000);

请记住，JavaScript/TypeScript中的月份是从0开始编号的（一月为0，十二月为11）。这是新手常犯错误的原因。为避免混淆，建议使用字符串格式或库。

获取日期组件的基本方法：

getFullYear() — 返回年份（4位数字）
getMonth() — 月份（0-11）
getDate() — 月份中的日期（1-31）
getDay() — 星期几（0 — 星期日，6 — 星期六）
getHours()、getMinutes()、getSeconds() — 时间
getTime() — 自1970年1月1日以来的毫秒数

带类型注解的使用示例：

function formatDate(date: Date): string {
    const year: number = date.getFullYear();
    const month: string = String(date.getMonth() + 1).padStart(2, '0');
    const day: string = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}

const today: Date = new Date();
console.log(formatDate(today)); // "2024-12-25"

日期格式化和显示

TypeScript内置的日期格式化方法有限。对于简单的任务，可以使用toLocaleDateString()和toLocaleTimeString()：

const date: Date = new Date('2024-12-25T10:30:00');

// 本地化格式
console.log(date.toLocaleDateString('zh-CN')); // "2024/12/25"
console.log(date.toLocaleTimeString('zh-CN')); // "10:30:00"

// 完整格式
console.log(date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
})); // "2024年12月25日星期三"

然而，对于复杂的格式化或对输出有严格控制需求时，最好使用专门的库。最流行的是date-fns——轻量级、模块化且完全兼容TypeScript。

安装：

npm install date-fns

使用示例：

import { format, addDays, parseISO } from 'date-fns';
import { zhCN } from 'date-fns/locale';

const date: Date = parseISO('2024-12-25T10:30:00');

// 格式化
console.log(format(date, 'dd.MM.yyyy')); // "25.12.2024"
console.log(format(date, 'PPP', { locale: zhCN })); // "2024年12月25日"

// 日期加法
const futureDate: Date = addDays(date, 10);
console.log(format(futureDate, 'dd.MM.yyyy')); // "04.01.2025"

date-fns中的其他有用函数：differenceInDays、isBefore、isAfter、startOfMonth、endOfWeek等。该库允许编写干净、函数式的代码，而不会改变原始数据。