TypeScript 2.0’da Tagged Union Types ve Read-Only Özellikleri

Selamlar,

Bugün TypeScript 2.0 ile karşımıza çıkan tagged union types‘ı, inceleyeceğiz. Bazen bir function, farklı tipte olabilecek tek bir değişken alabilir. Burada amaç, aynı işin farklı araçlar ile tekbir yer altında yapılabilmesini sağlamaktır. Ya da her iş için farklı functionlar da yazılabilir.

Örneğin bir ödeme sistemi yazdığımızı farz edelim. Ve 3 farklı ödeme şeklimiz olsun.

multiple

  • Cash
  • PayPal
  • CreditCard

3 ödeme tipi interface’i aşağıda görüldüğü gibidir: “kind” tipi ortak property’dir. Ödeme tipinin belirlenme şekli bu özelliğe göre yapılmaktadır.

type PaymentMethod = Cash | PayPal | CreditCard;

Ödeme tipimiz yukarıda görülen PaymentMethod tipidir. 3 ödeme şeklinden 1’i olabilmektedir.

Ödeme işlemi aşağıda görülen “DescribePaymentMethod()” function’ı ile yapılmaktadır. Parametre olarak yukarıda tanımladığımız “PaymentMethod” tipinde bir değişken almaktadır. Ödeme tipine göre 3 farklı işlem yapmaktadır. “swtich-case” yapısı ile ödeme şekli belirlenip, herbiri ödeme yöntemi için farklı bir işlem yapılmaktadır.

Aşağıda görüldüğü gibi ilgili interfacelerden “PayCredit” ve “PayByPal” ödeme biçimleri sınıfları türetilmiştir.

BorSoftShop” adında yeni bir sınıf oluşturulmuş ve “constructor()” durumunda yeni bir “<span>” yaratılıp sayfaya eklenmiştir. Daha sonra “start()” methodunda yukarıda tanımlanan 2 farklı sistemde ödeme yapılmış ve “DescribePaymentMethod()“‘unda farklı durumlar için tek bir parametre alınarak, farklı satın alma işlemleri, tek bir yerden gerçekleştirilmiştir.

Farklı satın alma yöntemlerinde, yaratılan span içerisine farklı tipte bilgiler yazılmıştır.

Örnek Ekran Çıktısı:

untitled

index.html:

Sayfanın yüklenmesi durumunda, alışveriş işlemine aşağıda görüldüğü gibi başlanır.

Sonuç olarak belirlenen multi-tipler tekbir değişkende tanımlanmış ve hangi tipde nesne gelir ise o tipde işlem “Union Types” sayesinde yapılmıştır.

TypeScript 2.0’de : Read-Only Özelliği: Belirlenen bir nesnenin sadece okunur olarak atanmasıdır. Amaç bazı değerlerin uygulama boyunca değiştirilmemesini sağlamaktır.

ReadOnly özelliği kullanılarak 2 örnek yazılmıştır. 1’i yanlış yani readonly bir değişkenin değiştirilememesi üzerine bir örnek iken diğeri readlony özelliğinin doğru kullanımı üzerinedir.

Yanlış: “type Point” x ve y değerleri read-only olduğu için aşağıdaki örnek de görüldüğü gibi “p.x” değeri değiştirilemez. Bunun bir oyunun başlangıç noktası olduğu düşünülür ise orgin yani başlangıç  noktasının değiştirilememesi gerekmektedir.

Doğru: Alttaki örnek de ilgili read-only point tipine ait “x” ve “y” değerleri sadece okunmuş, bu nedenle ilgili hata düzeltilmiştir.

Read-Only Class Properties: Bu örnekde ilgili read-only özelliğinin bir sınıf property’sinde nasıl kullanıldığını inceleyeceğiz. Aşağıda dairenin yarı çapı constructer’da atanmıştır. Ve read-only olarak atandığından değiştirilemez. Daha sonra “area()” adında bir property yazılmıştır. İlgili dairenin alanını vermektedir.

Aşağıda yarıçapı 2 olan bir daire yaratılmıştır. İlgili “radius=12” şeklinde bir atama denendiğinde hata ile karşılaşılmıştır. Çüngü ilgili “radius” read-only bir değişkendir.

untitled

Böylece TypeScript 2.0 ile karşımıza gelen birkaç beyendiğim özelliği bu makalede inceledik. Geldik bir makalenin daha sonuna.

Yeni bir makalede görüşmek üzere hoşçakalın.

Herkes Görsün:

Sevebilirsin...

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir