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

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

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

1. مشاكل Date الأصلي وحلها باستخدام TypeScript

الكائن القياسي Date في JavaScript غير مريح للغاية للعمليات المعقدة:

• القابلية للتغيير: طرق مثل 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); // 15 أكتوبر 2023console.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 (الأحد)

// تحليل سلسلة ISOconst parsed = parseISO("2023-10-15T10:30:00Z");console.log(format(parsed, 'HH:mm')); // "13:30" (مع مراعاة المنطقة الزمنية)

هام: تعمل date-fns مع كائنات Date، لذلك