Ang window Object sa TypeScript

Ipinaliwanag ng artikulong ito ang window object sa TypeScript.

Maaari kang matuto tungkol sa mga katangian at pamamaraan ng window object sa pamamagitan ng code.

YouTube Video

Ang window Object sa TypeScript

Ang window ay isang global na object sa TypeScript at JavaScript na kumakatawan sa buong window ng browser. Kasama rito ang maraming properties at mga methods para ma-access ang mga browser API, manipulahin ang DOM (Document Object Model), gumamit ng timers, storage, at iba pang mga tampok.

tsconfig.json at ang window Object

Sa TypeScript, kapag ina-access ang window object, ang mga browser-specific global features ay may type definitions, nagbibigay-daan sa editor autocompletion at type checking. Dahil sa standard type definition file ng TypeScript (lib.dom.d.ts), kinikilala ng TypeScript ang iba't ibang properties at methods ng window object.

Kapag gumagamit ng TypeScript, karaniwan na maglagay ng tsconfig.json file sa root ng proyekto. Ginagamit ang file na ito upang tukuyin ang mga opsyon ng compiler at saklaw ng mga type definition file.

Kapag nagtatrabaho gamit ang window, mahalagang paganahin ang browser type definitions (DOM type definitions). Kung wala ito, magdudulot ng mga type error ang window at 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}

• Sa pagtukoy ng "lib": ["es6", "dom"], ang mga type ng window at document ay tamang makikilala at magkakaroon ng auto-complete.

Pangunahing window Properties at Methods

1. window.document Ang window.document ay isang katangian na ginagamit upang ma-access ang DOM ng pahina. Maaaring kunin ang mga elemento at baguhin ang DOM.

1console.log(window.document.title);  // Display the title of the current document

• Sa halimbawang ito, ipinapakita ang pamagat ng kasalukuyang dokumento.

2. window.localStorage / window.sessionStorage Ang window.localStorage at window.sessionStorage ay mga katangian na ginagamit upang ma-access ang mga storage feature para makapag-save ng user data sa browser.

1window.localStorage.setItem('key', 'value');  // Save data
2const value = window.localStorage.getItem('key');  // Retrieve data
3console.log(value);  // 'value'

• Sa halimbawang ito, ang datos ay iniimbak sa localStorage, pagkatapos ay kinukuha at ipinapakita.

3. window.location Ang window.location ay isang object na ginagamit upang kunin at baguhin ang impormasyon tungkol sa kasalukuyang URL. Maaaring mag-redirect at magbago ng mga URL.

1console.log(window.location.href);  // Display the current URL
2window.location.href = 'https://example.com';  // Redirect to another page

• Sa halimbawang ito, ipinapakita ang URL at ire-redirect ang user sa ibang pahina.

4. window.setTimeout / window.setInterval Ang window.setTimeout at window.setInterval ay mga pamamaraan na ginagamit upang magpatakbo ng mga function pagkatapos ng delay o sa regular na interval.

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

• Ang code na ito ay nagpapatakbo ng proseso na magpapalabas ng mensahe sa console matapos ang dalawang segundo.

5. window.alert / window.confirm / window.prompt Nagpapakita ang alert, confirm, at prompt ng dialog box para ipakita ang alert o humingi ng input mula sa user.

1window.alert('Alert message');

• Ang code na ito ay nagpapakita ng alert dialog para ipaalam ang isang mensahe.

Mga Event ng window Object

Dahil bahagi ng DOM ang window, maaari ka ring makinig ng mga event nang direkta. Sa TypeScript, naka-auto-complete ang mga type, kaya kung mali ang event name o property, magdudulot ito ng error.

Window Resize Event

1window.addEventListener("resize", (event) => {
2    console.log("Window resized:", window.innerWidth, window.innerHeight);
3});

• Ang code na ito ay nagpapalabas ng bagong lapad at taas sa console kapag nagbago ang laki ng window.

Keyboard Event

1window.addEventListener("keydown", (event: KeyboardEvent) => {
2    console.log(`Key pressed: ${event.key}`);
3});

• Ang code na ito ay nagpapalabas ng pinindot na key sa console kapag ang user ay pumindot ng key.

Page Load Event

1window.addEventListener("load", () => {
2    console.log("Page fully loaded");
3});

• Ang code na ito ay nagpapalabas ng mensahe sa console kapag natapos nang mag-load ang pahina.

Mga Tala

• Sa TypeScript, ang mga type ng event object ay naiinfer, kaya mas ligtas ang iyong code kung isasaalang-alang ang mga type tulad ng KeyboardEvent o MouseEvent.

• Inirerekomenda na alisin ang mga event listener kapag hindi na ito kailangan. Maaari mong alisin ang mga listener gamit ang window.removeEventListener method.

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);

• Ipinapakita ng code na ito ang halimbawa ng pagdagdag at pagtanggal ng listener para sa click event.

Kapag Nagdadagdag ng Custom Properties

Kapag nagdadagdag ng custom properties sa window object, kinakailangan ang type extension sa TypeScript upang maiwasan ang type errors.

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

• Ang code na ito ay halimbawa ng pagdagdag ng custom na property sa window object sa TypeScript, pagtatakda ng value, at pagpapakita nito.

Pag-iingat Kapag Ginagamit ang Global window Object

Dahil sa mahigpit na type checking ng TypeScript, ang pagtatangkang gumamit ng mga hindi umiiral na properties o methods ay magreresulta sa errors. Halimbawa, ang pagtatangkang i-access ang isang hindi umiiral na property sa window object ay magdudulot ng error, kaya kinakailangang maayos na i-extend ang type.

Samakatuwid, ang window object ay may mahalagang tungkulin sa pag-access ng iba't ibang tampok ng mga browser applications, at sa TypeScript, maaari itong magamit nang ligtas sa pamamagitan ng paggamit ng type checking.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video