Articles
מבוא ל-TypeScript
אובייקט window ב-TypeScript

אובייקט window ב-TypeScript

מאמר זה מסביר את האובייקט window ב-TypeScript.

באפשרותך ללמוד על התכונות והמתודות של האובייקט window באמצעות קוד.

YouTube Video

אובייקט window ב-TypeScript

window הוא אובייקט גלובלי ב-TypeScript וב-JavaScript המייצג את חלון הדפדפן כולו. הוא כולל הרבה מאפיינים ושיטות לגישה ל-API-ים של הדפדפן, מניפולציה על ה-DOM (מודל אובייקט מסמך), שימוש בטיימרים, באחסון ועוד תכונות.

tsconfig.json ואובייקט window

ב-TypeScript, בעת גישה לאובייקט window, תכונות גלובליות ספציפיות לדפדפן מכילות הגדרות טיפוס, מה שמאפשר השלמה אוטומטית ועימות טיפוסים בעורך. בזכות קובץ ההגדרות הטיפוסי הסטנדרטי של TypeScript (lib.dom.d.ts), TypeScript מזהה מאפיינים ושיטות שונות של אובייקט window.

בעת שימוש ב-TypeScript, נהוג למקם קובץ tsconfig.json בשורש הפרויקט. קובץ זה משמש להגדרת אפשרויות מהדר והיקף קבצי הגדרת טיפוסים.

בעת עבודה עם window, חשוב במיוחד להפעיל הגדרות טיפוס לדפדפן (DOM type definitions). בלעדיהם, 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
  • בדוגמה זו, כתובת האתר מוצגת והמשתמש מנותב לעמוד אחר.
  1. window.setTimeout / window.setInterval window.setTimeout ו-window.setInterval הן מתודות לביצוע פונקציות לאחר השהייה או במרווחי זמן קבועים.
1window.setTimeout(() => {
2    console.log('This will be executed after 2 seconds');
3}, 2000);
  • קוד זה מריץ תהליך שמדפיס הודעה ל־console לאחר שתי שניות.
  1. window.alert / window.confirm / window.prompt alert, confirm ו-prompt מציגות תיבות דו-שיח לצורך הצגת אזהרות או קבלת קלט מהמשתמש.
1window.alert('Alert message');
  • קוד זה מציג תיבת התראה (alert) כדי להודיע הודעה.

אירועים של האובייקט window

מכיוון ש-window הוא חלק מה-DOM, ניתן להאזין לאירועים ישירות. ב-TypeScript, יש השלמה אוטומטית לטיפוסים, ולכן שימוש בשמות אירועים או תכונות שגויים יגרום לשגיאות.

אירוע שינוי גודל חלון 

1window.addEventListener("resize", (event) => {
2    console.log("Window resized:", window.innerWidth, window.innerHeight);
3});
  • קוד זה מדפיס את הרוחב והגובה החדשים ל־console כאשר גודל החלון משתנה.

אירוע לוח מקשים 

1window.addEventListener("keydown", (event: KeyboardEvent) => {
2    console.log(`Key pressed: ${event.key}`);
3});
  • קוד זה מדפיס ל־console את המקש שנלחץ כאשר המשתמש לוחץ על מקש.

אירוע טעינת דף 

1window.addEventListener("load", () => {
2    console.log("Page fully loaded");
3});
  • קוד זה מדפיס הודעה ל־console כאשר הדף סיים להיטען.

הערות

  • ב-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);
  • קוד זה מציג דוגמה להוספה והסרה של מאזין לאירוע לחיצה (click).

כאשר מוסיפים מאפיינים מותאמים אישית

בעת הוספת מאפיינים מותאמים אישית לאובייקט 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 Video

פונקציות גנרטור ב-TypeScript