TypeScript'teki window Nesnesi

Bu makale, TypeScript'teki window nesnesini açıklar.

Kod aracılığıyla window nesnesinin özellikleri ve yöntemleri hakkında bilgi edinebilirsiniz.

YouTube Video

TypeScript'teki window Nesnesi

window, TypeScript ve JavaScript'te tüm tarayıcı penceresini temsil eden bir global nesnedir. Tarayıcı API'lerine erişim, DOM'u (Belge Nesne Modeli) manipüle etme, zamanlayıcılar, depolama ve diğer özellikler için birçok özellik ve yöntem içerir.

tsconfig.json ve window Nesnesi

TypeScript'te window nesnesine erişirken, tarayıcıya özgü küresel özellikler için tanımlamalar yapılmıştır, bu da editör otomatik tamamlama ve tip denetimini etkinleştirir. TypeScript'in standart tip tanımlama dosyası (lib.dom.d.ts) sayesinde, TypeScript window nesnesinin çeşitli özelliklerini ve yöntemlerini tanır.

TypeScript kullanırken, genellikle proje kök dizinine bir tsconfig.json dosyası yerleştirilir. Bu dosya, derleyici seçeneklerini ve tür tanımı dosyalarının kapsamını belirlemek için kullanılır.

window ile çalışırken, tarayıcı tip tanımlarının (DOM tip tanımları) etkinleştirilmesi özellikle önemlidir. Bunlar olmadan, window ve document tip hatalarına yol açacaktır.

 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"] belirterek, window ve document türleri doğru şekilde tanınır ve otomatik tamamlanır.

Ana window Özellikleri ve Yöntemleri

1. window.document window.document, sayfanın DOM'una erişmek için kullanılan bir özelliktir. Elemanları alabilir ve DOM üzerinde değişiklikler yapabilirsiniz.

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

• Bu örnekte, mevcut belgenin başlığı görüntülenir.

2. window.localStorage / window.sessionStorage window.localStorage ve window.sessionStorage, tarayıcıda kullanıcı verilerini kaydetmeye olanak tanıyan depolama özelliklerine erişmek için kullanılan özelliklerdir.

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

• Bu örnekte, veriler localStorage'a kaydedilir, ardından alınır ve görüntülenir.

3. window.location window.location, mevcut URL hakkında bilgi almak ve bu bilgileri değiştirmek için kullanılan bir nesnedir. Yönlendirme yapabilir ve URL'leri değiştirebilirsiniz.

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

• Bu örnekte, URL görüntülenir ve kullanıcı başka bir sayfaya yönlendirilir.

4. window.setTimeout / window.setInterval window.setTimeout ve window.setInterval, fonksiyonları bir gecikmeden sonra veya düzenli aralıklarla çalıştırmak için kullanılan yöntemlerdir.

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

• Bu kod, iki saniye sonra konsola bir mesaj çıktısı veren bir işlemi çalıştırır.

5. window.alert / window.confirm / window.prompt alert, confirm ve prompt, uyarı göstermek veya kullanıcıdan bilgi almak için diyalog kutuları gösterir.

1window.alert('Alert message');

• Bu kod, bir mesajı bildirmek için bir uyarı penceresi (alert dialog) gösterir.

window Nesnesinin Olayları

window, DOM'un bir parçası olduğundan, doğrudan olayları dinleyebilirsiniz. TypeScript'te tipler otomatik tamamlanır, bu yüzden yanlış olay adları veya özellikleri kullanmak hatalara yol açar.

Pencere Yeniden Boyutlandırma Olayı

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

• Bu kod, pencere boyutu değiştiğinde yeni genişlik ve yüksekliği konsola yazdırır.

Klavye Olayı

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

• Bu kod, kullanıcı bir tuşa bastığında basılan tuşu konsola yazdırır.

Sayfa Yüklenme Olayı

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

• Bu kod, sayfa yüklemeyi tamamladığında konsola bir mesaj çıktısı verir.

Notlar

• TypeScript'te, olay nesnesi türleri çıkarılır; bu nedenle KeyboardEvent veya MouseEvent gibi türlere dikkat etmek kodunuzu daha güvenli hale getirir.

• Artık ihtiyaç duyulmadıklarında olay dinleyicilerinin kaldırılması önerilir. window.removeEventListener yöntemiyle dinleyicileri kaldırabilirsiniz.

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

• Bu kod, bir tıklama olayı için önce bir dinleyici eklemenin ve sonra kaldırmanın bir örneğini gösterir.

Özelleştirilmiş Özellikler Eklerken

window nesnesine özelleştirilmiş özellikler eklerken, TypeScript'te tip hatalarını önlemek için tip genişletmesi yapılması gerekir.

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

• Bu kod, TypeScript'te window nesnesine özel bir özellik eklemenin, bir değer atamanın ve bunu görüntülemenin bir örneğidir.

Global window Nesnesi Kullanırken Dikkat Edilmesi Gerekenler

TypeScript'in katı tip kontrolü nedeniyle, mevcut olmayan özellikler veya yöntemler kullanmaya çalışmak hatalara neden olur. Örneğin, window nesnesindeki mevcut olmayan bir özelliğe olduğu gibi erişmeye çalışmak hata oluşturacaktır, bu yüzden tipi uygun şekilde genişletmeniz gerekir.

Bu nedenle, window nesnesi tarayıcı uygulamalarının çeşitli özelliklerine erişimde merkezi bir rol oynar ve TypeScript'te tip kontrolünden yararlanarak güvenle kullanılabilir.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video