Typescript Type Aliases ve Type Assertion
Özellikle custom tipler oluşturmak için bize çok fayda sağlayacak olan type aliases dan bahsedelim.
Daha önce yaptığımız bir örnek ile devam edelim
elmaRengiadında bir değişkenimiz var ve “:” işareti ile tipini belirledik “kırmızı” | “sarı” | “yeşil” den herhangi birisi olabilir. Ben kırmızı seçtim.
Elmanın rengini belirleyeceğim bir fonksiyon oluşturdum. içerisine renk parametresi alıyor ve parametremizin tipi de yine “kırmızı” | “sarı” | “yeşil” şeklinde olacak. İçerisinde işlem olarak elmaRengi değişkenine renk parametresini eşitliyor.
Fonksiyonu kullanmak istediğimizde parametre olarak belirlediğimiz tipte bir değer gönderdiğimizde sorun olmuyor.
Yazım yanlışı yaptığımızda uyarı alıyoruz.
Her şey güzel ama dikkat ederseniz önceki yazılarda da bu şekilde tip ataması yaptık ve bunu sürekli tekrar etmek yorucu olabilir ayrıca buna benzer “kırmızı” | “sarı” | “yeşil”tip atamalarında yazım yanlışı yapabilir mi? Evet. Öyleyse bu durumu da daha güvenli hale getirelim.
type keyword ü ile type alias oluşturabiliriz ve bunu da değişkenimize ve parametremize atayabiliriz.
elmaRengi değişkenimizin üzerine mouse imlecini getirdiğimizde tipinin ElmaRenkleri olduğunu görebiliriz.
Fonksiyonumuzu da :void hale getirdim ve renk parametresinin tipini ElmaRenkleri olarak belirledim.
type keyword ü ile dilediğiniz gibi custom tipler oluşturabiliriz. Fonksiyonumuzu da bir tipe bağlayalım.
RenkSecFunction adında bir type oluşturdum ve fonksiyon parametresi olarak ElmaRenkleri tipinide bir parametre alacağını belirttim. Ayrıca fonksiyonun void olduğunu da belirttim.
Fonksiyon tanımlamasında gerekli düzenlemeleri yapalım.
renkBelirle fonksiyonunun RenkSecFonksiyon tipinde olduğunu belirttim. Artık renk parametresine ElmaRenkleri tipinde olduğunu söylememize gerek kalmadı.
Type Assertion
elma adında bir nesnemiz olsun, önce nesnemizin tipini oluşturalım.
Nesnemizin fiyat ve renk adında iki property si bulunmaktadır. Şimdi de nesnemizi oluşturalım.
elma nesnemiz JSON formatındadır, şimdi string hale getirelim ve bir fonksiyon ile servis çağrısı simüle etmeye çalışalım.
stringElma değişkeni oluşturdum ve JSON.stringify ile elma nesnesini string hale getirdim. getirElma fonksiyonu ile elma adında string tipinde bir parametre alıyoruz ve JSON.parse ile nesneye dönüştürerek implicit return ediyoruz.
Neden bir servis çağrısını simüle etmeye çalıştık? Çünkü servis çağrılarının sonucunda bize dönen nesnenin ne olduğunu biz biliriz ama typescript bilemez. Bu yüzdende yukarıda bulunan görselde de getirElma fonksiyonun return tipi any olmuştur. O halde elmanın propertylerine ulaşamam.
Bunu düzeltmenin en basit yolu:
Fonksiyonumuzun return tipine ElmaType vermektir.
Bir diğer yöntemi ise type assertion:
return bölümünü parantez içerisine aldım:
(JSON.parse(elmaStr));Daha sonra JSON ifadesinin başına <ElmaType> ifadesini ekledim.
(<ElmaType>JSON.parse(elmaStr));fonksiyonun return tipini de sildim, artık ihtiyacımız yok.
Bu şekilde yapılan type assertion işlemi ReactJS geliştiricileri için tehlikelidir. ReactJS içerisinde bileşenler <BilesenAdi /> şeklinde kullanılır ve bu type assertion <ElmaType>yöntemi ReactJS içerisinde hata almanıza sebep olur.
as ifadesi ile kullanmak bu sorunu çözecektir.
JSON.parse(elmaStr); kodunun hemen ardından:
JSON.parse(elmaStr) as ElmaType;Şeklinde type assertion yapmamız yeterli olur.
Bir sonraki konumuz Interface ler olacaktır.
