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
elmaRengi
adı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.