Objek window dalam TypeScript

Artikel ini menjelaskan objek window dalam TypeScript.

Anda dapat mempelajari properti dan metode dari objek window melalui kode.

YouTube Video

Objek window dalam TypeScript

window adalah objek global dalam TypeScript dan JavaScript yang merepresentasikan keseluruhan jendela browser. Objek ini mencakup banyak properti dan metode untuk mengakses API browser, memanipulasi DOM (Document Object Model), menggunakan timer, penyimpanan, dan fitur lainnya.

tsconfig.json dan Objek window

Dalam TypeScript, saat mengakses objek window, fitur global khusus browser memiliki definisi tipe, memungkinkan penyelesaian otomatis di editor dan pemeriksaan tipe. Berkat file definisi tipe standar TypeScript (lib.dom.d.ts), TypeScript mengenali berbagai properti dan metode dari objek window.

Saat menggunakan TypeScript, biasanya kita menempatkan file tsconfig.json di root proyek. File ini digunakan untuk menentukan opsi kompiler dan cakupan file definisi tipe.

Saat bekerja dengan window, sangat penting untuk mengaktifkan definisi tipe browser (definisi tipe DOM). Tanpa ini, window dan document akan menghasilkan error tipe.

 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"], tipe dari window dan document akan dikenali dan dilengkapi otomatis dengan benar.

Properti dan Metode Utama pada window

1. window.document window.document adalah properti yang digunakan untuk mengakses DOM dari halaman. Anda dapat mengambil elemen dan membuat perubahan pada DOM.

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

• Dalam contoh ini, judul dokumen saat ini ditampilkan.

2. window.localStorage / window.sessionStorage window.localStorage dan window.sessionStorage adalah properti yang digunakan untuk mengakses fitur penyimpanan yang memungkinkan menyimpan data pengguna di browser.

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 ditampilkan.

3. window.location window.location adalah objek yang digunakan untuk mengambil dan memanipulasi informasi tentang URL saat ini. Anda dapat melakukan pengalihan dan mengubah URL.

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

• Dalam contoh ini, URL ditampilkan dan pengguna diarahkan ke halaman lain.

4. window.setTimeout / window.setInterval window.setTimeout dan window.setInterval adalah metode yang digunakan untuk menjalankan fungsi setelah penundaan atau pada interval tertentu.

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

• Kode ini menjalankan proses yang menampilkan pesan ke konsol setelah dua detik.

5. window.alert / window.confirm / window.prompt alert, confirm, dan prompt menampilkan kotak dialog untuk menampilkan peringatan atau meminta input dari pengguna.

1window.alert('Alert message');

• Kode ini menampilkan dialog peringatan untuk memberi tahu sebuah pesan.

Event dari Objek window

Karena window merupakan bagian dari DOM, Anda juga dapat langsung mendengarkan event. Di TypeScript, tipe akan dilengkapi otomatis, jadi menggunakan nama event atau properti yang salah akan menyebabkan error.

Event Resize Window

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

• Kode ini menampilkan lebar dan tinggi baru ke konsol ketika ukuran jendela berubah.

Event Keyboard

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

• Kode ini menampilkan tombol yang ditekan ke konsol saat pengguna menekan tombol.

Event Load Halaman

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

• Kode ini menampilkan pesan ke konsol ketika halaman selesai dimuat.

Catatan

• Di TypeScript, tipe objek event disimpulkan secara otomatis, jadi memperhatikan tipe seperti KeyboardEvent atau MouseEvent membuat kode Anda lebih aman.

• Disarankan untuk menghapus event listener ketika sudah tidak dibutuhkan. Anda dapat menghapus pendengar dengan menggunakan metode 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);

• Kode ini menunjukkan contoh menambahkan dan kemudian menghapus pendengar untuk peristiwa klik.

Saat Menambahkan Properti Kustom

Saat menambahkan properti kustom ke objek window, perlu dilakukan perluasan tipe dalam TypeScript untuk menghindari kesalahan tipe.

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

• Kode ini adalah contoh menambahkan properti khusus ke objek window di TypeScript, menetapkan nilai, dan menampilkannya.

Perhatian Saat Menggunakan Objek Global window

Karena pemeriksaan tipe yang ketat di TypeScript, mencoba menggunakan properti atau metode yang tidak ada akan menghasilkan kesalahan. Sebagai contoh, mencoba mengakses properti yang tidak ada pada objek window akan menyebabkan kesalahan, sehingga Anda perlu memperluas tipe secara benar.

Dengan demikian, objek window memainkan peran penting dalam mengakses berbagai fitur aplikasi browser, dan dalam TypeScript, Anda dapat menggunakannya dengan aman menggunakan pemeriksaan tipe.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video