Objek window dalam TypeScript

Artikel ini menerangkan tentang objek window dalam TypeScript.

Anda boleh mempelajari sifat dan kaedah objek window melalui kod.

YouTube Video

Objek window dalam TypeScript

window ialah objek global dalam TypeScript dan JavaScript yang mewakili keseluruhan tingkap pelayar. Ia merangkumi banyak properti dan kaedah untuk mengakses API pelayar, memanipulasi DOM (Model Objek Dokumen), menggunakan pemasa, storan, dan ciri-ciri lain.

tsconfig.json dan Objek window

Dalam TypeScript, apabila mengakses objek window, ciri global yang khusus kepada pelayar mempunyai definisi jenis, membolehkan pengisian automatik editor dan semakan jenis. Terima kasih kepada fail definisi jenis standard TypeScript (lib.dom.d.ts), TypeScript mengenali pelbagai properti dan kaedah objek window.

Apabila menggunakan TypeScript, adalah biasa untuk meletakkan fail tsconfig.json di akar projek. Fail ini digunakan untuk menentukan pilihan pengkompil dan skop fail definisi jenis.

Apabila bekerja dengan window, adalah sangat penting untuk mengaktifkan definisi jenis pelayar (definisi jenis DOM). Tanpa ini, window dan document akan menyebabkan ralat jenis.

 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}

• Dengan menentukan "lib": ["es6", "dom"], jenis window dan document akan dikenalpasti dan dilengkapi secara automatik dengan betul.

Properti dan Kaedah Utama window

1. window.document window.document ialah sifat yang digunakan untuk mengakses DOM halaman. Anda boleh mendapatkan elemen dan membuat perubahan pada DOM.

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

• Dalam contoh ini, tajuk dokumen semasa dipaparkan.

2. window.localStorage / window.sessionStorage window.localStorage dan window.sessionStorage ialah sifat yang digunakan untuk mengakses ciri storan yang membolehkan penyimpanan data pengguna dalam pelayar.

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

• Dalam contoh ini, data disimpan ke localStorage, kemudian diambil dan dipaparkan.

3. window.location window.location ialah objek yang digunakan untuk mendapatkan dan memanipulasi maklumat tentang URL semasa. Anda boleh melakukan penghalaan semula dan menukar URL.

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

• Dalam contoh ini, URL dipaparkan dan pengguna dialihkan ke halaman lain.

4. window.setTimeout / window.setInterval window.setTimeout dan window.setInterval ialah kaedah untuk menjalankan fungsi selepas kelewatan atau pada selang masa yang tetap.

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

• Kod ini melaksanakan proses yang mengeluarkan mesej ke konsol selepas dua saat.

5. window.alert / window.confirm / window.prompt alert, confirm, dan prompt memaparkan kotak dialog untuk menunjukkan amaran atau meminta input daripada pengguna.

1window.alert('Alert message');

• Kod ini memaparkan dialog amaran untuk memaklumkan mesej.

Acara objek window

Oleh kerana window adalah sebahagian daripada DOM, anda juga boleh mendengar acara secara langsung. Dalam TypeScript, jenis akan dilengkapkan secara automatik, jadi menggunakan nama acara atau sifat yang salah akan menyebabkan ralat.

Acara Saiz Semula Window

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

• Kod ini mengeluarkan lebar dan tinggi baru ke konsol apabila saiz tetingkap berubah.

Acara Papan Kekunci

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

• Kod ini mengeluarkan kekunci yang ditekan ke konsol apabila pengguna menekan sebarang kekunci.

Acara Memuatkan Halaman

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

• Kod ini mengeluarkan mesej ke konsol apabila halaman selesai dimuatkan.

Nota

• Dalam TypeScript, jenis objek acara akan disimpulkan, jadi mengambil berat tentang jenis seperti KeyboardEvent atau MouseEvent menjadikan kod anda lebih selamat.

• Adalah disarankan untuk membuang pendengar acara apabila ia tidak lagi diperlukan. Anda boleh membuang pendengar dengan menggunakan kaedah 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);

• Kod ini menunjukkan contoh menambah dan kemudian membuang pendengar untuk acara klik.

Apabila Menambah Properti Khusus

Apabila menambah properti khusus kepada objek window, peluasan jenis diperlukan dalam TypeScript untuk mengelakkan ralat jenis.

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

• Kod ini ialah contoh menambah sifat tersuai pada objek window dalam TypeScript, menetapkan nilai, dan memaparkannya.

Berhati-hati Apabila Menggunakan Objek Global window

Disebabkan oleh semakan jenis yang ketat dalam TypeScript, percubaan menggunakan properti atau kaedah yang tidak wujud akan menghasilkan ralat. Sebagai contoh, percubaan untuk mengakses properti yang tidak wujud pada objek window secara langsung akan menyebabkan ralat, jadi anda perlu memperluas jenis dengan betul.

Oleh itu, objek window memainkan peranan penting dalam mengakses pelbagai ciri aplikasi pelayar, dan dalam TypeScript, anda boleh menggunakannya dengan selamat melalui semakan jenis.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video