Tür Korumaları: in & instanceof

Coddy'nin JavaScript Journey'sinin TypeScript'e Giriş bölümünün bir parçası — ders 69 / 73.

Birleşim türleri (union types) ile çalışırken, türe özgü özelliklere veya metotlara güvenli bir şekilde erişmeden önce genellikle hangi özel türle uğraştığınızı belirlemeniz gerekir. Tür korumaları (type guards), çalışma zamanında türleri daraltmak için güvenli bir yol sağlar.

in operatörü, bir özelliğin bir nesne üzerinde var olup olmadığını kontrol eder. Bu, özellikle farklı özelliklere sahip nesne türlerinin bir birleşimine (union) sahip olduğunuzda kullanışlıdır:

type Dog = { name: string; breed: string };
type Cat = { name: string; meow: () => void };

function petSound(pet: Dog | Cat) {
  if ('breed' in pet) {
    // TypeScript burada pet'in bir Dog olduğunu bilir
    console.log(`${pet.name} is a ${pet.breed}`);
  } else {
    // TypeScript burada pet'in bir Cat olduğunu bilir
    pet.meow();
  }
}

instanceof operatörü, bir nesnenin belirli bir yapıcı (constructor) fonksiyon veya sınıf tarafından oluşturulup oluşturulmadığını kontrol eder. Henüz sınıfları işlememiş olsak da, bu operatör yerleşik JavaScript nesneleri veya özel sınıflarla çalışırken kullanışlıdır:

function processValue(value: string | Date) {
  if (value instanceof Date) {
    // TypeScript, value'nun bir Date olduğunu bilir
    console.log(value.getFullYear());
  } else {
    // TypeScript, value'nun bir string olduğunu bilir
    console.log(value.toUpperCase());
  }
}

Her iki operatör de TypeScript derleyicisinin hangi tiple çalıştığınızı anlamasına yardımcı olarak, tipe özgü özelliklere ve metotlara güvenli erişim sağlar.

Görev

Kolay

Aralarındaki farkı ayırt etmek için in operatörünü kullanarak farklı medya öğesi türlerini işleyen bir fonksiyon oluşturun.

İki tür takma adı (type alias) oluşturun:

Movie: title (string) ve director (string) özelliklerine sahip
Song: title (string) ve artist (string) özelliklerine sahip

Aşağıdakileri yapan getMediaInfo adında bir fonksiyon oluşturun:

Movie | Song türünde bir media parametresi alır
director özelliğinin var olup olmadığını kontrol etmek için in operatörünü kullanır
Eğer bir filmse "Movie: [title] directed by [director]" döndürür
Eğer bir şarkıysa "Song: [title] by [artist]" döndürür
Açık bir string dönüş türüne sahiptir

Aşağıdakileri yapan processValue adında ikinci bir fonksiyon oluşturun:

string | Date türünde bir value parametresi alır
value değerinin bir Date olup olmadığını kontrol etmek için instanceof operatörünü kullanır
Eğer bir Date ise yılı sayı olarak döndürür (getFullYear() kullanarak)
Eğer bir string ise string uzunluğunu sayı olarak döndürür
Açık bir number dönüş türüne sahiptir

Test verilerini oluşturun:

movie1: { title: "Inception", director: "Christopher Nolan" }
song1: { title: "Bohemian Rhapsody", artist: "Queen" }
movie2: { title: "The Matrix", director: "The Wachowskis" }
song2: { title: "Imagine", artist: "John Lennon" }
testDate: new Date("2023-12-25")
testString: "TypeScript"

Aşağıdaki çıktıları yazdırın:

movie1 ile getMediaInfo fonksiyonunu çağırın
song1 ile getMediaInfo fonksiyonunu çağırın
movie2 ile getMediaInfo fonksiyonunu çağırın
song2 ile getMediaInfo fonksiyonunu çağırın
testDate ile processValue fonksiyonunu çağırın
testString ile processValue fonksiyonunu çağırın

Kendin dene

// YAPILACAK: Kodunuzu buraya yazın

// Movie ve Song için tür takma adları oluşturun


// getMediaInfo fonksiyonunu oluşturun


// processValue fonksiyonunu oluşturun


// Test verilerini oluşturun
const movie1 = { title: "Inception", director: "Christopher Nolan" };
const song1 = { title: "Bohemian Rhapsody", artist: "Queen" };
const movie2 = { title: "The Matrix", director: "The Wachowskis" };
const song2 = { title: "Imagine", artist: "John Lennon" };
const testDate = new Date("2023-12-25");
const testString = "TypeScript";

// Çıktıları yazdırın
console.log(getMediaInfo(movie1));
console.log(getMediaInfo(song1));
console.log(getMediaInfo(movie2));
console.log(getMediaInfo(song2));
console.log(processValue(testDate));
console.log(processValue(testString));