ProgramlamaFrontend Geliştirici

TypeScript'teki isteğe bağlı özellikler (Optional Properties) mekanizması nasıl çalışır, hangi sorunlarla karşılaşılabilir ve bunlardan nasıl kaçınılabilir?

Hintsage yapay zeka asistanı ile mülakatları geçin

Cevap.

TypeScript'teki isteğe bağlı özellikler, özellik adının ardından soru işareti (?) ile gösterilir. Bu, özelliğin ya tanımlı ya da nesnede mevcut olmayabileceği anlamına gelir. Bu, tüm alanların zorunlu olmadığı yapıların tanımlanmasında kullanışlıdır.

Örnek:

interface User { id: number; name?: string; } const u1: User = { id: 1 }; // TAMAM const u2: User = { id: 2, name: 'Ivan' }; // TAMAM

İnce noktalar:

  • İsteğe bağlı bir özellik yalnızca undefined olmayabilir, aynı zamanda nesnede tamamen olmayabilir.
  • Değerin varlığını kontrol etmek (örneğin, if (user.name)) undefined ile yok olma arasındaki ayrımı yapmaz.
  • Sık karşılaşılan bir hata, özelliğin undefined olabileceğini dikkate almamak ve kontrol etmeden yöntemlere/özelliklere başvurmaktır.

Korunmak için:

  • undefined kontrollerini kullanın:
if (user.name !== undefined) { console.log(user.name.toUpperCase()); }
  • İsteğe bağlı zincirleme operatörünü kullanabilirsiniz:
console.log(user.name?.toUpperCase());

Aldatıcı Soru.

Eğer bir nesnenin arayüzü { foo?: string } olarak tanımlanmışsa, her zaman foo özelliği yalnızca bir string veya undefined olabilir mi? Örneğin, null değeri yazılabilir mi?

Yanlış cevap:

  • "İsteğe bağlı özellik yalnızca bir string veya undefined olabilir, başka bir şey olamaz."

Doğru cevap:

  • Aslında, null açıkça atanırsa, TypeScript bunu kabul eder, ancak yalnızca tür string | null olarak genişletilirse. Varsayılan olarak yalnızca string veya undefined vardır.
  • Örnek:
interface A { foo?: string } let x: A = { foo: null }; // HATA!

Bilinmeyen ince noktalar nedeniyle gerçekteki hatalara dair örnekler.


Hikaye

Büyük bir projede, bazı nesneler sunucudan bazı isteğe bağlı alanlar olmadan geliyordu. Programcı, bu özelliklerde doğrudan yöntemleri çağırdı (örneğin, toLowerCase()), bu da alanın yokluğu durumunda çalışma zamanında hatalara yol açıyordu. Sorunu çözmek için, takım isteğe bağlı alanlara erişim için sıkı kontroller ve linter kuralları uyguladı.


Hikaye

Mantıksal ifadelerde, özelliğin varlığı ve gerçekliği karıştırıldı: if (user.email) boş dizeler için tetiklenmedi, oysa özellik tanımlıydı. Bazı bildirimlerin kullanıcılara gönderilmemesine neden olan bir hata ortaya çıktı.


Hikaye

Takım, isteğe bağlı bir özelliğe null değeri yazmaya karar verdi ve bunun doğru olduğunu düşündü. TypeScript hata veriyordu ve bunu aşmak için türü string | null olarak genişletmek zorunda kaldı; bu da bu nesnelerle ilgili iş mantığının tamamen gözden geçirilmesini gerektirdi.