Bölüm 6: Gelişmiş Tip Özellikleri (Advanced Types)

Şimdi geldik TypeScript’in mantıksal derinliğini gösteren, hata önlemeyi maksimuma çıkaran, oldukça önemli bir konuya:

Bu bölümde neler öğreneceğiz?

• Type Inference (tip çıkarımı): TypeScript tipi kendisi nasıl anlar?
• Type Guard (tip kontrolü): Bir değerin gerçek tipini nasıl güvenli biçimde kontrol ederiz?
• Type Assertion (as): TS’in algılayamadığı yerlerde tipi nasıl kendimiz belirtiriz?
• in, typeof, instanceof, custom type guard gibi ifadeler ne işe yarar?
• Gerçek dünya örnekleriyle kavramları tam olarak oturtmak

6.1 Type Inference (Tip Çıkarımı)

Tanım: Type Inference, bir değişken tanımlarken TypeScript’in tipini otomatik olarak çıkarmasıdır.

1
let name = "Yasin";      // string
2
let age = 30;            // number
3
let isActive = true;     // boolean

➡️ Burada hiçbir tip yazmadık ama TS, değerlerden tipi anladı. Bu gayet kullanışlıdır.

Problemli Durum:

1
let user; // ❌ user: any
2
user = "Ali";  
3
user = 123;     // 💥 Güvenlik yok

➡️ Eğer değer atamadan sadece let user; derseniz, user: any olur. Bu da TS’in tip kontrolünü bırakması anlamına gelir.

✅ Çözüm: ya başlangıç değeri verin ya da tip belirtin.

1
let user: string | number;

6.2 Type Guards – Tip Kontrol Yöntemleri

Union tipleri kullandığınızda (string | number gibi), çalışma zamanında bir değerin hangi tipte olduğunu anlayıp ona göre işlem yapmalısınız. Bunun için Type Guard'lar kullanılır.

1️⃣ typeof ile Tip Koruma

1
function handleValue(val: string | number) {
2
  if (typeof val === "string") {
3
    console.log(val.toUpperCase());
4
  } else {
5
    console.log(val.toFixed(2));
6
  }
7
}

➡️ typeof sadece şu türlerle çalışır: "string", "number", "boolean", "undefined", "object", "function"

2️⃣ instanceof ile Class Tipi Koruma

1
class Dog {
2
  bark() {
3
    console.log("Hav hav!");
4
  }
5
}
6

7
class Cat {
8
  meow() {
9
    console.log("Miyav!");
10
  }
11
}
12

13
function makeSound(animal: Dog | Cat) {
14
  if (animal instanceof Dog) {
15
    animal.bark();
16
  } else {
17
    animal.meow();
18
  }
19
}

✅ instanceof sadece class'larda çalışır, plain object’lerde değil.

3️⃣ in Operatörü ile Alan Kontrolü

1
type Admin = { role: "admin"; accessLevel: number };
2
type Guest = { role: "guest"; expiresIn: number };
3

4
function showUser(user: Admin | Guest) {
5
  if ("accessLevel" in user) {
6
    console.log("Admin seviyesi:", user.accessLevel);
7
  } else {
8
    console.log("Misafir süresi:", user.expiresIn);
9
  }
10
}

➡️ in operatörü bir nesnede bir alanın olup olmadığını kontrol eder.

6.3 Type Assertion (as) – Tipi Elle Belirtmek

Tanım: TypeScript’in bir nesnenin türünü doğru anlayamadığı durumlarda bizim kesin olarak belirttiğimiz tip.

1
const input = document.getElementById("email") as HTMLInputElement;
2
input.value = "hello@example.com";

Tehlike:

1
const user = {} as User;

Bu durumda aslında user tamamen boş olsa bile TS onu User gibi görür. Bu çok tehlikeli olabilir.

✅ En güvenli yöntem: Type Guard kullanmak.

1
const input = document.getElementById("email");
2

3
if (input instanceof HTMLInputElement) {
4
  input.value = "hello@example.com";
5
}

6.4 Custom Type Guard Fonksiyonları – is Type

Tanım: Kendi kontrol fonksiyonumuzu yazarız ve TS'e şu objeyi şu tipe daralt diyebiliriz.

1
type Admin = { role: "admin"; accessLevel: number };
2
type Guest = { role: "guest"; expiresIn: number };
3
type User = Admin | Guest;
4

5
function isAdmin(user: User): user is Admin {
6
  return user.role === "admin";
7
}

Kullanımı:

1
function displayInfo(user: User) {
2
  if (isAdmin(user)) {
3
    // user artık Admin olarak tanınır
4
    console.log("Admin Seviyesi:", user.accessLevel);
5
  } else {
6
    console.log("Misafir süresi:", user.expiresIn);
7
  }
8
}

✅ Bu sayede TypeScript user'ın tipini doğru şekilde daraltır.

Uygulama: API Response Modelleme

1
type Loading = { state: "loading" };
2
type Success = { state: "success"; data: string };
3
type Error = { state: "error"; message: string };
4

5
type FetchState = Loading | Success | Error;
6

7
function renderResult(result: FetchState) {
8
  switch (result.state) {
9
    case "loading":
10
      return "Yükleniyor...";
11
    case "success":
12
      return `Veri: ${result.data}`;
13
    case "error":
14
      return `Hata: ${result.message}`;
15
  }
16
}

Açıklama:

• state alanı “discriminator” olarak görev yapar.
• switch-case içinde TypeScript doğru yapıya daraltma yapar.

✅ En iyi tip güvenliği ve otomatik öneri deneyimi bu şekilde elde edilir.

Alıştırmalar

• typeof, instanceof ve in operatörlerini örneklerle dene.
• string | number | boolean tipi alan bir printInfo() fonksiyonu yaz.
• Custom guard fonksiyonu (isAdmin()) yazarak User tipini ayır.
• DOM'dan alınan bir input’u güvenli şekilde tip belirterek değerini yazdır.

Bölüm Özeti

Bu Bölümle Artık:

• Bir değerin hangi tipte olduğunu güvenli şekilde kontrol edebilirsin.
• Tip karmaşasını önleyebilir, runtime hatalarının önüne geçebilirsin.
• as, typeof, instanceof, in, is Type gibi yapıları doğru yerlerde kullanarak projenin güvenliğini artırabilirsin.
• API durumlarını, UI varyasyonlarını ve React bileşenlerini çok daha sağlam hale getirebilirsin.