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

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

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

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

الأساسيات: إنشاء التواريخ والعمليات الأساسية

الكائن Date في TypeScript هو نفس كائن 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); // 25 ديسمبر 2024

// من الميلي ثانية (Unix timestamp)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() — عدد الميلي ثانية منذ 1 يناير 1970

مثال على الاستخدام مع الكتابة:

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('ar-SA')); // "٢٥/١٢/٢٠٢٤"console.log(date.toLocaleTimeString('ar-SA')); // "١٠:٣٠:٠٠"

// تنسيق كاملconsole.log(date.toLocaleString('ar-SA', {    year: 'numeric',    month: 'long',    day: 'numeric',    weekday: 'long'})); // "الأربعاء، ٢٥ ديسمبر ٢٠٢٤"

ومع ذلك، للتنسيق المعقد أو التحكم الصارم في المخرجات، من الأفضل استخدام مكتبات متخصصة. الأكثر شهرة هي date-fns — خفيفة الوزن، معيارية، ومتوافقة تمامًا مع TypeScript.

التثبيت:

npm install date-fns

مثال على الاستخدام:

import { format, addDays, parseISO } from 'date-fns';import { arSA } 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: arSA })); // "٢٥ ديسمبر ٢٠٢٤"

// إضافة أيامconst futureDate: Date = addDays(date, 10);console.log(format(futureDate, 'dd.MM.yyyy')); // "04.01.2025"

وظائف مفيدة أخرى من date-fns: differenceInDays, isBefore, isAfter, startOfMonth, endOfWeek وغيرها الكثير. تسمح المكتبة بكتابة كود نظيف ووظيفي دون تحوير المصدر