Articles
টাইপস্ক্রিপ্ট-এর পরিচিতি
টাইপস্ক্রিপ্টে `window` অবজেক্ট

টাইপস্ক্রিপ্টে `window` অবজেক্ট

এই প্রবন্ধে টাইপস্ক্রিপ্টে window অবজেক্ট ব্যাখ্যা করা হয়েছে।

কোডের মাধ্যমে আপনি window অবজেক্টের বৈশিষ্ট্য এবং পদ্ধতি সম্পর্কে জানতে পারবেন।

YouTube Video

টাইপস্ক্রিপ্টে window অবজেক্ট

window টাইপস্ক্রিপ্ট এবং জাভাস্ক্রিপ্টে একটি গ্লোবাল অবজেক্ট যা পুরো ব্রাউজার উইন্ডোকে উপস্থাপন করে। এতে ব্রাউজার এপিআইতে অ্যাক্সেস, ডিওএম (ডকুমেন্ট অবজেক্ট মডেল) পরিচালনা, টাইমার, স্টোরেজ এবং অন্যান্য বৈশিষ্ট্যগুলি ব্যবহারের জন্য অনেক প্রপার্টিজ এবং মেথড রয়েছে।

tsconfig.json এবং window অবজেক্ট

টাইপস্ক্রিপ্টে, যখন window অবজেক্টে অ্যাক্সেস করা হয়, তখন ব্রাউজার-নির্দিষ্ট গ্লোবাল বৈশিষ্ট্যগুলির টাইপ ডেফিনিশন থাকে, যা এডিটরের স্বয়ংক্রিয় পূরণ এবং টাইপ চেকিং সক্রিয় করে। টাইপস্ক্রিপ্টের স্ট্যান্ডার্ড টাইপ ডেফিনিশন ফাইল (lib.dom.d.ts) এর জন্য, টাইপস্ক্রিপ্ট window অবজেক্টের বিভিন্ন প্রপার্টি এবং মেথড সনাক্ত করতে পারে।

টাইপস্ক্রিপ্ট ব্যবহারের সময়, সাধারণত প্রকল্পের রুট ডিরেক্টরিতে 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 অ্যাক্সেস করতে ব্যবহৃত হয়। আপনি এলিমেন্টগুলি পুনরুদ্ধার করতে এবং ডিওএম-এ পরিবর্তন আনতে পারেন।
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 সম্পর্কে তথ্য পাওয়া ও পরিবর্তন করতে ব্যবহৃত হয়। আপনি রিডাইরেক্ট করতে এবং ইউআরএল পরিবর্তন করতে পারেন।
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-এর অংশ, তাই আপনি সরাসরি ইভেন্ট শুনতে পারেন। টাইপস্ক্রিপ্টে টাইপ স্বয়ংক্রিয়ভাবে সম্পূর্ণ হয়, তাই ভুল ইভেন্ট নাম বা প্রোপার্টি ব্যবহার করলে ত্রুটি হবে।

উইন্ডো পুনঃআকার ইভেন্ট 

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});
  • এই কোডটি পৃষ্ঠা লোড হওয়া শেষ হলে কনসোলে একটি বার্তা আউটপুট করে।

নোটস

  • টাইপস্ক্রিপ্টে, ইভেন্ট অবজেক্টের টাইপ অনুমান করা হয়, তাই 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!"
  • এই কোডটি টাইপস্ক্রিপ্টে window অবজেক্টে একটি কাস্টম প্রোপার্টি যোগ, মূল্য সেট এবং তা প্রদর্শনের একটি উদাহরণ।

গ্লোবাল window অবজেক্ট ব্যবহারের সময় সতর্কতা

টাইপস্ক্রিপ্টের কঠোর টাইপ চেকিংয়ের কারণে, অস্তিত্বহীন প্রপার্টি বা মেথড ব্যবহার করার চেষ্টা করলে ত্রুটি দেখা দেবে। উদাহরণস্বরূপ, window অবজেক্টে অস্তিত্বহীন প্রপার্টিতে সরাসরি অ্যাক্সেসের চেষ্টা করলে ত্রুটি হবে, তাই আপনাকে সঠিকভাবে টাইপ এক্সটেন্ড করতে হবে।

এইভাবে, window অবজেক্ট ব্রাউজার অ্যাপ্লিকেশনের বিভিন্ন বৈশিষ্ট্য অ্যাক্সেস করার একটি কেন্দ্রীয় ভূমিকা পালন করে এবং টাইপস্ক্রিপ্টে, টাইপ চেকিং ব্যবহার করে এটি নিরাপদে ব্যবহার করা যায়।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video

টাইপস্ক্রিপ্টে জেনারেটর ফাংশন