Nullable Türler ('strictNull')

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

Varsayılan olarak TypeScript, null ve undefined'ın herhangi bir türe atanmasına izin verir; bu da çalışma zamanı hatalarına yol açabilir. strictNullChecks derleyici seçeneği, null ve undefined'ı kendi başlarına ayrı türler haline getirerek bu davranışı değiştirir.

strictNullChecks etkinleştirildiğinde, bu değerlere izin vermek istiyorsanız tür açıklamalarınıza açıkça null veya undefined eklemelisiniz:

// strictNullChecks olmadan - buna izin verilirdi
let name: string = null; // strictNullChecks ile hata!

// strictNullChecks ile - açık olmalısınız
let name: string | null = null; // Şimdi bu çalışıyor

Bu, potansiyel null değerleri kullanmadan önce işlemenizi zorunlu kılar. Önce kontrol etmeden, null olabilecek bir değer üzerinde metot çağıramaz veya özelliklere erişemezsiniz:

function processName(name: string | null) {
  // Bu bir hataya neden olur
  // console.log(name.toUpperCase());
  
  // Önce kontrol etmelisiniz
  if (name !== null) {
    console.log(name.toUpperCase()); // Kullanımı güvenli
  }
}

Bu derleyici seçeneği, yaygın "Cannot read property of null" çalışma zamanı hatalarını derleme zamanında yakalayarak önlemeye yardımcı olur ve kodunuzu daha güvenilir ve öngörülebilir hale getirir.

Görev

Kolay

null değerler içerebilecek kullanıcı profili verilerini güvenli bir şekilde işleyen bir fonksiyon oluşturun. Bu meydan okuma, strictNullChecks özelliğinin sizi null olabilir (nullable) türleri açıkça işlemeye nasıl zorladığını gösterir.

Aşağıdaki özelliklere sahip getUserDisplayName adında bir fonksiyon oluşturun:

string | null türünde bir fullName parametresi alır
Eğer null değilse tam adı döndürür
Eğer tam ad null ise "Anonymous User" döndürür
Açık bir string dönüş türüne sahiptir

Aşağıdaki özelliklere sahip formatUserEmail adında ikinci bir fonksiyon oluşturun:

string | null türünde bir email parametresi alır
Eğer null değilse e-postayı küçük harflerle döndürür
Eğer e-posta null ise "No email provided" döndürür
Açık bir string dönüş türüne sahiptir

Aşağıdaki özelliklere sahip getUserInfo adında üçüncü bir fonksiyon oluşturun:

string | null türünde name ve string | null türünde email olmak üzere iki parametre alır
Parametreleri işlemek için önceki her iki fonksiyonu da kullanır
Şu formatta bir dize döndürür: "Name: [processed name], Email: [processed email]"
Açık bir string dönüş türüne sahiptir

Fonksiyonlarınızı aşağıdaki verilerle test edin:

getUserDisplayName("John Smith") fonksiyonunu çağırın ve sonucu yazdırın
getUserDisplayName(null) fonksiyonunu çağırın ve sonucu yazdırın
formatUserEmail("ALICE@EXAMPLE.COM") fonksiyonunu çağırın ve sonucu yazdırın
formatUserEmail(null) fonksiyonunu çağırın ve sonucu yazdırın
getUserInfo("Bob Johnson", "bob@test.com") fonksiyonunu çağırın ve sonucu yazdırın
getUserInfo(null, null) fonksiyonunu çağırın ve sonucu yazdırın
getUserInfo("Sarah Wilson", null) fonksiyonunu çağırın ve sonucu yazdırın

Kendin dene

// YAPILACAK: Kodunuzu buraya yazın
// fullName (string | null) alan ve string döndüren getUserDisplayName fonksiyonunu oluşturun

// email (string | null) alan ve string döndüren formatUserEmail fonksiyonunu oluşturun

// name ve email (her ikisi de string | null) alan ve string döndüren getUserInfo fonksiyonunu oluşturun

// Fonksiyonları test edin ve sonuçları yazdırın
console.log(getUserDisplayName("John Smith"));
console.log(getUserDisplayName(null));
console.log(formatUserEmail("ALICE@EXAMPLE.COM"));
console.log(formatUserEmail(null));
console.log(getUserInfo("Bob Johnson", "bob@test.com"));
console.log(getUserInfo(null, null));
console.log(getUserInfo("Sarah Wilson", null));