- Konu sahibi
- #1
İlk yapılacak iş, değerin gerçekten
Projenin kök dizinindeki
Ayarı değiştirdikten sonra projeyi kendi derleme komutunuzla yeniden çalıştırın. Yeni hatalar, daha önce türlerde gizli kalan olası boş değerleri gösterir. Bu hataları tek tek gerçek veri akışına göre düzeltin; yalnızca derleyiciyi susturmak için her yere
En güvenli çözüm, değerin mevcut olup olmadığını kontrol ettikten sonra kullanmaktır. Kontrolün ardından TypeScript türü daraltır ve ilgili blok içinde değeri boş olmayan tür olarak kabul eder.
Burada iki farklı sonuç ayrılır: kullanıcı bulunursa adı döndürülür, bulunamazsa güvenli bir metin döndürülür. Gerçek uygulamada ikinci durumda boş metin yerine hata fırlatmak,
Hem
Başlık yoksa fonksiyon hiçbir şey yazdırmaz; bu, başlığın var olduğunu veya varsayılan bir değer gerektiğini kanıtlamaz. Böyle bir durumda eksik başlık önemliyse sessizce devam etmek yerine açık bir hata davranışı belirleyin.
Değer yoksa yerine sabit bir değer koymak istiyorsanız nullish coalescing operatörünü, yani
Bir değerin yokluğunda sonuç da
Burada
Aynı uyarı farklı iş kurallarına işaret edebilir. Hangi yöntemin uygun olduğu, boş değerin normal bir durum mu yoksa veri hatası mı olduğuna bağlıdır.
Örneğin API yanıtı gelmeden kullanıcı adına erişmeye çalışıyorsanız sorun yalnızca tür hatası değildir; verinin ne zaman yüklendiğini de düzeltmeniz gerekir.
Bu kullanım derleyici uyarısını kaldırır; fakat
Önce hata mesajındaki değişkenin türünü ve değerin hangi fonksiyondan geldiğini inceleyin. Bir özellik isteğe bağlıysa türü
Dizi aramalarında
null mı, undefined mı olabileceğini türüne yazmak ve kullanmadan önce kontrol etmektir. strictNullChecks açıksa TypeScript, bu iki değeri normal türlerden ayrı kabul eder; bu nedenle özelliğe veya metoda erişmeden önce daraltma yapın, değer yoksa varsayılan değer üretin ya da iş kuralına uygun bir hata döndürün. Sadece ! operatörüyle uyarıyı susturmak ise değerin çalışma zamanında gerçekten var olduğunu garanti etmez.Hatanın nedeni: değer her zaman mevcut olmayabilir
null, bilinçli olarak boş bırakılmış bir değeri; undefined ise çoğunlukla hiç atanmamış veya bulunamamış bir değeri ifade eder. Örneğin bir aramada kayıt bulunamayabilir, isteğe bağlı bir özellik gönderilmeyebilir veya bir dizi araması sonuç vermeyebilir.
Kod:
function getUserName(id: number): string {
const user = users.find((item) => item.id === id);
return user.name;
}find() sonucu bulunamadığında undefined dönebileceği için user.name satırında hata oluşur. TypeScript’in verdiği uyarı, kullanımdan önce bu ihtimali ele almanız gerektiğini gösterir; kaydın kesinlikle bulunduğunu kanıtlamaz.Önce tsconfig.json ayarını kontrol edin
Projenin kök dizinindeki
tsconfig.json dosyasında strictNullChecks ayarını arayın. Ayar kapalıysa TypeScript, null ve undefined değerlerinin birçok yerde kullanılmasına izin verebilir; bu durum hatayı derleme aşamasında göstermeyip çalışma zamanına bırakır. Mümkünse ayarı açın veya proje zaten genel katı denetimi kullanıyorsa strict seçeneğinin etkin olduğunu doğrulayın.
JSON:
{
"compilerOptions": {
"strictNullChecks": true
}
}Ayarı değiştirdikten sonra projeyi kendi derleme komutunuzla yeniden çalıştırın. Yeni hatalar, daha önce türlerde gizli kalan olası boş değerleri gösterir. Bu hataları tek tek gerçek veri akışına göre düzeltin; yalnızca derleyiciyi susturmak için her yere
any eklemeyin.Değeri kullanmadan önce kontrol edin
En güvenli çözüm, değerin mevcut olup olmadığını kontrol ettikten sonra kullanmaktır. Kontrolün ardından TypeScript türü daraltır ve ilgili blok içinde değeri boş olmayan tür olarak kabul eder.
Kod:
function getUserName(id: number): string {
const user = users.find((item) => item.id === id);
if (user === undefined) {
return "Kullanıcı bulunamadı";
}
return user.name;
}Burada iki farklı sonuç ayrılır: kullanıcı bulunursa adı döndürülür, bulunamazsa güvenli bir metin döndürülür. Gerçek uygulamada ikinci durumda boş metin yerine hata fırlatmak,
null döndürmek veya kullanıcıya hata göstermek gerekebilir. Seçim, çağıran kodun kaydın bulunamamasını nasıl ele aldığına bağlıdır.Hem
null hem de undefined olasılığını birlikte kontrol etmek için value != null kullanılabilir. Bu ifade, gevşek eşitlik kullanmasına rağmen TypeScript tarafından her iki değeri de dışlayan bir kontrol olarak daraltılır.
Kod:
function printTitle(title: string | null | undefined): void {
if (title != null) {
console.log(title.toUpperCase());
}
}Başlık yoksa fonksiyon hiçbir şey yazdırmaz; bu, başlığın var olduğunu veya varsayılan bir değer gerektiğini kanıtlamaz. Böyle bir durumda eksik başlık önemliyse sessizce devam etmek yerine açık bir hata davranışı belirleyin.
Varsayılan değer gerekiyorsa?? kullanın
Değer yoksa yerine sabit bir değer koymak istiyorsanız nullish coalescing operatörünü, yani
??, kullanın.
Kod:
const displayName = user.nickname ?? user.name ?? "İsimsiz kullanıcı";??, yalnızca sol taraf null veya undefined olduğunda sağdaki değeri seçer. Bu nedenle geçerli olan "", 0 veya false değerlerini yanlışlıkla değiştirmez. || ise tüm falsy değerleri boş kabul edebileceğinden, sayı veya boole değerlerinde aynı sonucu vermeyebilir.İsteğe bağlı erişim yalnızca çökmeyi önler
Bir değerin yokluğunda sonuç da
undefined olabilir. Bu nedenle isteğe bağlı zincirleme operatörü ?. yalnızca erişimi güvenli hâle getirir; sonucu otomatik olarak normal bir değere dönüştürmez.
Kod:
const city: string | undefined = user.address?.city;
if (city === undefined) {
console.log("Adres bilgisi yok");
} else {
console.log(city.toUpperCase());
}Burada
user.address?.city ifadesi adres yoksa hata fırlatmaz, ancak city yine de undefined olabilir. Sonraki kod bu ihtimali hâlâ ele almalıdır. Varsayılan değer istiyorsanız user.address?.city ?? "Bilinmiyor" gibi bir ifade kullanabilirsiniz.Çözüm seçimini sonuca göre yapın
Aynı uyarı farklı iş kurallarına işaret edebilir. Hangi yöntemin uygun olduğu, boş değerin normal bir durum mu yoksa veri hatası mı olduğuna bağlıdır.
| Durum | Uygun yaklaşım | Sonuç |
|---|---|---|
| Değer yoksa işlem devam edebilir | ?? ile varsayılan değer verin | Kod güvenli bir yedek değerle devam eder |
| Değer yoksa farklı akış gerekir | if kontrolü yapın | Eksik değer için ayrı işlem uygulanır |
| Değer yoksa bu bir program hatasıdır | Açık hata fırlatın | Hata erken ve anlaşılır biçimde görünür |
| Değerin kesinlikle var olduğu dışarıdan garanti ediliyor | Gerekirse ! kullanın | Derleyici uyarısı kalkar, ancak çalışma zamanı garantisi oluşmaz |
! eklemek isteği bekletmez, veriyi oluşturmaz ve sunucudan kayıt gelmesini sağlamaz.Non-null assertion kullanırken dikkatli olun
value! sözdizimi, TypeScript’e “bu değer burada kesinlikle boş değil” demektir:
Kod:
const user = users.find((item) => item.id === id);
console.log(user!.name);Bu kullanım derleyici uyarısını kaldırır; fakat
user bulunamazsa JavaScript çalışma zamanında hata verebilir. Yalnızca aynı kapsamda veya uygulamanın yaşam döngüsünde değerin varlığı gerçekten garanti ediliyorsa kullanın. API, form, DOM veya dizi araması gibi dış girdilerde önce açık kontrol yapmak daha güvenlidir.Hata devam ederse kontrol edilecek yerler
Önce hata mesajındaki değişkenin türünü ve değerin hangi fonksiyondan geldiğini inceleyin. Bir özellik isteğe bağlıysa türü
string | undefined; API açıkça boş değer döndürebiliyorsa string | null veya her ikisi olmalıdır. Türü gerçeğe aykırı biçimde yalnızca string olarak yazmak uyarıyı gizleyebilir, ancak çalışma zamanı sorununu çözmez.Dizi aramalarında
find() sonucunun bulunamayabileceğini, isteğe bağlı parametrelerde parametrenin hiç gönderilmeyebileceğini ve asenkron verilerde ilk render sırasında verinin henüz gelmemiş olabileceğini ayrıca değerlendirin. Kontrolü yaptıktan sonra derleme komutunu yeniden çalıştırın. Uyarı kalkıyor ve değer yokken seçtiğiniz davranış gerçekleşiyorsa çözüm tamamlanmıştır; yalnızca uyarı kalkıyor fakat değer gerçekte yokken hata oluşuyorsa türü değil veri akışını düzeltmeniz gerekir.