TypeScript'te isteğe bağlı işlev parametreleri ve nesne özellikleri nasıl çalışır, aralarındaki farklar nelerdir ve kullanımlarında hangi incelikler vardır? Tipik sorunlar ve hatalara örnek verin.

Cevap.

İsteğe bağlı işlev parametreleri, parametre adından sonra soru işareti (?) ile belirtilir. Bu durum, nesnelerdeki (arayüzler veya türler) isteğe bağlı özellikler için de geçerlidir.

• İşlevler için:

function greet(name?: string) {
  console.log(`Merhaba, ${name ?? 'yabancı'}`);
}
greet(); // Merhaba, yabancı
greet('John'); // Merhaba, John

• Nesneler için:

interface User {
  id: number;
  nickname?: string;
}
const u1: User = { id: 1 };
const u2: User = { id: 2, nickname: 'Bob' };

İncelikler:

• İsteğe bağlı parametre — işlev çağrıldığında verilmeyebilir ve bu durumda değeri undefined olur.
• İsteğe bağlı özellik — bu tür bir özellik nesnede olmayabilir.
• Karıştırmayın: Eğer arayüzde bir özellik isteğe bağlı olarak belirtilmemişse, o zorunludur!
• İsteğe bağlı parametre, işlevin argüman listesinde en sona yerleştirilmelidir.

Aldatıcı Soru.

Eğer işlev isteğe bağlı string parametre ile tanımlanmışsa (function fn(x?: string)), bunu açıkça undefined ile çağırmak mümkün mü? fn() ve fn(undefined) arasındaki fark nedir?

Cevap: Evet, undefined ile çağırmak mümkündür: fn(undefined) ve fn() — sonuç aynıdır, ancak işlev içinde x === undefined olacaktır. Ancak eğer imzada varsayılan bir değer tanımlanmışsa:

function fn(x: string = 'demo') {
  console.log(x);
}
fn(); // demo
fn(undefined); // demo
fn('abc'); // abc

Eğer argüman isteğe bağlı olarak belirtilmemişse (soru işareti yoksa veya varsayılan değeri yoksa), fn() çağrısı bir derleme hatası olacaktır.

Bu konudaki inceliklerin bilinmemesi nedeniyle gerçek hatalara örnekler.

---

Hikaye

User arayüzünde phone: string (soru işareti olmadan) olarak bir özellik belirtildi, ancak nesne örneği oluşturulurken eklemeyi unuttular. Sonuç olarak, TypeScript derleyicisi zorunlu özelliklerin eksikliği nedeniyle hata vermeye başladı. Geçici bir çözüm olarak phone: undefined eklemeye çalıştılar, ancak bu tip ile çelişiyordu, çünkü string !== undefined ve bu validasyon hatalarının daha da artmasına neden oldu.

---

Hikaye

Bir işlevde birkaç isteğe bağlı parametre tanımlandı, ancak bunlar argüman listesinin sonunda yer almadı. Bu durumda TypeScript hata verdi ve parametrelerin sırasının değiştirilmesi, geçen değerlerin parametrelerle örtüşüm sırasını değiştirdi, bu da karışıklığa ve işlevin yanlış çalışmasına neden oldu.

---

Hikaye

İnterface'lerde isteğe bağlı alanlar, dış API için veri türü açıklanırken unutuldu (örneğin, müşterinin soyadı? string), bu nedenle bir tarafı şemayı değiştirirken bu alanlar gelmeyi durdurdu, diğer tarafta ise kod, bunları kontrol etmeden okumaya çalıştığında çökmeye başladı.