العمل مع التواريخ والوقت في TypeScript: دليل شامل

العمل مع التواريخ والوقت في TypeScript: من الأساسيات إلى التقنيات المتقدمة

إدارة التواريخ والوقت هي إحدى المهام الأساسية في تطوير الويب. سواء كان عرض وقت النشر، حساب المواعيد النهائية، أو مزامنة البيانات مع الخادم، يوفر TypeScript أدوات قوية للعمل مع الطوابع الزمنية. في هذه المقالة، سنستعرض جميع جوانب العمل مع التواريخ: من إنشاء كائن Date إلى المعالجات المعقدة مع المناطق الزمنية والتنسيق.

1. أساسيات العمل مع كائن Date في TypeScript

في TypeScript، كما في JavaScript، يتم التعامل مع التواريخ عبر الكائن المدمج Date. بفضل الكتابة الصارمة، يساعد TypeScript في تجنب الأخطاء عند تمرير بيانات غير صحيحة.

إنشاء كائن Date

هناك عدة طرق لإنشاء مثيل تاريخ:

// التاريخ والوقت الحاليانconst now: Date = new Date();console.log(now); // Tue Oct 24 2023 14:30:00 GMT+0300

// بالميلي ثانية (Unix timestamp)const fromTimestamp: Date = new Date(1698153000000);

// من سلسلة نصية (ISO 8601)const fromString: Date = new Date("2023-10-24T12:00:00Z");

// من المكونات (السنة، الشهر، اليوم، الساعات، الدقائق، الثواني)const customDate: Date = new Date(2023, 9, 24, 14, 30, 0); // الأشهر من 0 إلى 11!

هام: الأشهر في JavaScript/TypeScript تبدأ من 0 (يناير — 0، ديسمبر — 11). هذا سبب شائع للأخطاء.

الحصول على مكونات التاريخ

لاستخراج الأجزاء الفردية من التاريخ، تُستخدم دوال الجلب (getters):

const date: Date = new Date();const year: number = date.getFullYear();      // 2023const month: number = date.getMonth();         // 9 (أكتوبر)const day: number = date.getDate();            // 24const hours: number = date.getHours();         // 14const minutes: number = date.getMinutes();     // 30const seconds: number = date.getSeconds();     // 0const dayOfWeek: number = date.getDay();       // 2 (الثلاثاء، 0 - الأحد)

2. تنسيق وعرض التواريخ

غالبًا ما يكون الإخراج القياسي Date.toString() غير مناسب لواجهات المستخدم. دعنا نستعرض الطرق الرئيسية للتنسيق.

طرق التنسيق المدمجة

• toDateString() — "Tue Oct 24 2023"
• toLocaleDateString() — تاريخ محلي (مثل "24.10.2023" لروسيا)
• toISOString() — سلسلة بتنسيق ISO ("2023-10-24T11:30:00.000Z")

const date: Date = new Date();console.log(date.toLocaleDateString('ar-SA')); // ٢٤/١٠/٢٠٢٣console.log(date.toLocaleTimeString('ar-SA')); // ١٤:٣٠:٠٠

التنسيق المخصص باستخدام Intl.DateTimeFormat

للتحكم الأكثر مرونة، استخدم Intl.DateTimeFormat:

const date: Date = new Date();const formatter = new Intl.DateTimeFormat('ar-SA', {    year: 'numeric',    month: 'long',    day: 'numeric',    weekday: 'long',    hour: '2-digit',    minute: '2-digit'});console.log(formatter.format(date)); // "الثلاثاء، 24 أكتوبر 2023، 14:30"

مكتبة date-fns

للمهام المعقدة، يُوصى باستخدام مكتبة date-fns. إنها خفيفة الوزن ولديها دعم ممتاز لـ TypeScript:

import { format, addDays, isWeekend } from 'date-fns';import { arSA } from 'date-fns/locale';

const date: Date = new Date();console.log(format(date, 'dd.MM.yyyy', { locale: arSA })); // "٢٤.١٠.٢٠٢٣"console.log(format(date, 'HH:mm:ss')); // "١٤:٣٠:٠٠"console.log(isWeekend(date)); // false

3. معالجة التواريخ: الجمع، الطرح والمقارنة

تعديل التاريخ

أبسط طريقة هي استخدام دوال الضبط (setters):

const date: Date = new Date();date.setFullYear(2024);date.setMonth(11); // ديسمبرdate.setDate(31);console.log(date); // "Tue Dec 31 2024 14:30