Articles
مقدمة إلى TypeScript
كائن النافذة في TypeScript

كائن النافذة في TypeScript

تشرح هذه المقالة كائن window في TypeScript۔

يمكنك التعرف على خصائص وطرق كائن window من خلال الشيفرة۔

YouTube Video

كائن النافذة في TypeScript

window هو كائن عالمي في TypeScript وJavaScript يمثل نافذة المتصفح بأكملها۔ يتضمن العديد من الخصائص والأساليب للوصول إلى واجهات برمجة تطبيقات المتصفح، والتعامل مع DOM (نموذج كائن المستند)، واستخدام المؤقتات، والتخزين، وغيرها من الميزات۔

tsconfig.json وكائن window

في TypeScript، عند الوصول إلى كائن window، تكون الميزات العالمية الخاصة بالمتصفح لها تعريفات نوعية، مما يتيح الإكمال التلقائي في المحرر وفحص الأنواع۔ بفضل ملف تعريف النوع القياسي في TypeScript (lib.dom.d.ts)، يتعرف TypeScript على الخصائص والأساليب المختلفة لكائن window۔

عند استخدام TypeScript، من الشائع وضع ملف tsconfig.json في جذر المشروع۔ يُستخدم هذا الملف لتحديد خيارات المترجم ونطاق ملفات تعريف الأنواع۔

عند العمل مع window، من المهم بشكل خاص تفعيل تعريفات أنواع المتصفح (تعريفات أنواع الـ DOM)۔ بدون ذلك، سيؤدي استخدام window وdocument إلى أخطاء في الأنواع۔

 1{
 2  "compilerOptions": {
 3    "target": "es6",
 4    "module": "esnext",
 5    "strict": true,
 6    "lib": ["es6", "dom"],   // Enable DOM type definitions
 7    "outDir": "./dist"
 8  },
 9  "include": ["src"]
10}
  • عند تحديد "lib": ["es6", "dom"]، سيتم التعرف تلقائيًا على أنواع window وdocument وتكملتها بشكل صحيح۔

الخصائص والأساليب الرئيسية لكائن window

  1. window.document window.document خاصية تُستخدم للوصول إلى DOM الصفحة۔ يمكنك استرداد العناصر وإجراء تغييرات على DOM۔
1console.log(window.document.title);  // Display the title of the current document
  • في هذا المثال، يتم عرض عنوان المستند الحالي۔
  1. window.localStorage / window.sessionStorage window.localStorage وwindow.sessionStorage هما خاصيتان تُستخدمان للوصول إلى ميزات التخزين التي تسمح بحفظ بيانات المستخدم في المتصفح۔
1window.localStorage.setItem('key', 'value');  // Save data
2const value = window.localStorage.getItem('key');  // Retrieve data
3console.log(value);  // 'value'
  • في هذا المثال، يتم حفظ البيانات في localStorage، ثم استرجاعها وعرضها۔
  1. window.location window.location هو كائن يُستخدم لجلب ومعالجة معلومات عنوان URL الحالي۔ يمكنك تنفيذ عمليات إعادة التوجيه وتغيير عناوين URL۔
1console.log(window.location.href);  // Display the current URL
2window.location.href = 'https://example.com';  // Redirect to another page
  • في هذا المثال، يتم عرض عنوان URL ويتم إعادة توجيه المستخدم إلى صفحة أخرى۔
  1. window.setTimeout / window.setInterval window.setTimeout وwindow.setInterval هما طريقتان تُستخدمان لتنفيذ الدوال بعد تأخير أو على فترات منتظمة۔
1window.setTimeout(() => {
2    console.log('This will be executed after 2 seconds');
3}, 2000);
  • ينفذ هذا الرمز عملية تعرض رسالة في وحدة التحكم بعد ثانيتين۔
  1. window.alert / window.confirm / window.prompt alert وconfirm وprompt تعرض صناديق حوارية لإظهار التنبيهات أو طلب إدخال من المستخدم۔
1window.alert('Alert message');
  • يعرض هذا الرمز مربع حوار تنبيه لإعلام رسالة۔

أحداث كائن window

نظرًا لأن window جزء من الـ DOM، يمكنك أيضًا الاستماع إلى الأحداث مباشرة۔ في TypeScript، تُكمل الأنواع تلقائيًا، لذلك استخدام أسماء أحداث أو خصائص غير صحيحة سيؤدي إلى أخطاء۔

حدث تغيير حجم نافذة المتصفح 

1window.addEventListener("resize", (event) => {
2    console.log("Window resized:", window.innerWidth, window.innerHeight);
3});
  • يعرض هذا الرمز العرض والارتفاع الجديدين في وحدة التحكم عند تغيير حجم النافذة۔

حدث لوحة المفاتيح 

1window.addEventListener("keydown", (event: KeyboardEvent) => {
2    console.log(`Key pressed: ${event.key}`);
3});
  • يعرض هذا الرمز المفتاح المضغوط في وحدة التحكم عند ضغط المستخدم على أي مفتاح۔

حدث تحميل الصفحة 

1window.addEventListener("load", () => {
2    console.log("Page fully loaded");
3});
  • يعرض هذا الرمز رسالة في وحدة التحكم عندما تنتهي الصفحة من التحميل۔

ملاحظات

  • في TypeScript، يتم استنتاج أنواع كائنات الأحداث، لذا الانتباه لأنواع مثل KeyboardEvent أو MouseEvent يجعل الشيفرة أكثر أمانًا۔

  • يُنصح بإزالة مستمعي الأحداث عندما لا تكون هناك حاجة لهم۔ يمكنك إزالة المستمعين باستخدام طريقة window.removeEventListener۔

1function handleClick() {
2  console.log("Clicked!");
3}
4
5// Add event listener
6window.addEventListener("click", handleClick);
7
8// Remove event listener
9window.removeEventListener("click", handleClick);
  • يعرض هذا الرمز مثالاً على إضافة ثم إزالة مستمع لحدث النقر۔

عند إضافة خصائص مخصصة

عند إضافة خصائص مخصصة إلى كائن window، يكون من الضروري توسيع النوع في TypeScript لتجنب أخطاء الأنواع۔

1// Add a custom property to the window
2interface Window {
3    myCustomProperty: string;
4}
5
6window.myCustomProperty = "Hello, World!";
7console.log(window.myCustomProperty);  // "Hello, World!"
  • هذا الرمز مثال على إضافة خاصية مخصصة إلى كائن window في TypeScript، وتعيين قيمة لها وعرضها۔

التحذيرات عند استخدام كائن window العالمي

نظرًا لفحص الأنواع الصارم في TypeScript، سيؤدي محاولة استخدام خصائص أو أساليب غير موجودة إلى أخطاء۔ على سبيل المثال، محاولة الوصول إلى خاصية غير موجودة في كائن window كما هي ستؤدي إلى خطأ، لذلك يجب توسيع النوع بشكل صحيح۔

وبالتالي، يلعب كائن window دورًا مركزيًا في الوصول إلى الميزات المختلفة لتطبيقات المتصفح، وفي TypeScript، يمكنك استخدامه بأمان من خلال الاعتماد على فحص الأنواع۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

دوال المُولدات في TypeScript