टाइपस्क्रिप्ट में विंडो ऑब्जेक्ट

यह लेख TypeScript में window ऑब्जेक्ट की व्याख्या करता है।

आप कोड के माध्यम से window ऑब्जेक्ट के गुणों और विधियों के बारे में जान सकते हैं।

YouTube Video

टाइपस्क्रिप्ट में विंडो ऑब्जेक्ट

window टाइपस्क्रिप्ट और जावास्क्रिप्ट में एक ग्लोबल ऑब्जेक्ट है जो पूरे ब्राउज़र विंडो का प्रतिनिधित्व करता है। इसमें ब्राउज़र API तक पहुंचने, DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल) को नियंत्रित करने, टाइमर का उपयोग करने, स्टोरेज और अन्य सुविधाओं के लिए कई प्रॉपर्टी और मेथड शामिल हैं।

tsconfig.json और window ऑब्जेक्ट

टाइपस्क्रिप्ट में, जब window ऑब्जेक्ट को एक्सेस करते हैं, तो ब्राउज़र-विशिष्ट ग्लोबल सुविधाओं में टाइप डिफिनिशन होती हैं, जो एडिटर ऑटोकम्पलीशन और टाइप चेकिंग को सक्षम बनाती हैं। टाइपस्क्रिप्ट की मानक टाइप डिफिनिशन फाइल (lib.dom.d.ts) के कारण, टाइपस्क्रिप्ट 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

• इस उदाहरण में, वर्तमान दस्तावेज़ का शीर्षक प्रदर्शित किया गया है।

2. 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 में सहेजा जाता है, फिर प्राप्त किया जाता है और प्रदर्शित किया जाता है।

3. 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 प्रदर्शित किया गया है और उपयोगकर्ता को एक अन्य पृष्ठ पर पुनः निर्देशित किया जाता है।

4. window.setTimeout / window.setInterval window.setTimeout और window.setInterval वे तरीके हैं जो विलंब के बाद या नियमित अंतराल पर फ़ंक्शन चलाने के लिए उपयोग किए जाते हैं।

1window.setTimeout(() => {
2    console.log('This will be executed after 2 seconds');
3}, 2000);

• यह कोड एक प्रक्रिया निष्पादित करता है जो दो सेकंड के बाद कंसोल में एक संदेश आउटपुट करता है।

5. 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 ऑब्जेक्ट में कस्टम प्रॉपर्टी जोड़ते समय, टाइप एरर से बचने के लिए टाइप एक्सटेंशन की आवश्यकता होती है।

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!"

• यह कोड TypeScript में window ऑब्जेक्ट में एक कस्टम प्रॉपर्टी जोड़ने, एक मान सेट करने और उसे प्रदर्शित करने का उदाहरण है।

ग्लोबल window ऑब्जेक्ट का उपयोग करते समय सावधानियां

टाइपस्क्रिप्ट की सख्त टाइप चेकिंग के कारण, अस्तित्वहीन प्रॉपर्टी या मेथड का उपयोग करने का प्रयास करने पर एरर हो सकती है। उदाहरण के लिए, window ऑब्जेक्ट पर किसी अस्तित्वहीन प्रॉपर्टी को ऐसे ही एक्सेस करने का प्रयास करने पर एरर होगी, इसलिए आपको टाइप को ठीक से एक्सटेंड करना होगा।

इस प्रकार, window ऑब्जेक्ट ब्राउज़र एप्लिकेशन की विभिन्न सुविधाओं तक पहुंचने में एक केंद्रीय भूमिका निभाता है, और टाइपस्क्रिप्ट में, आप टाइप चेकिंग का उपयोग करके इसे सुरक्षित रूप से उपयोग कर सकते हैं।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video