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.
- 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
interface Cash { kind: "nakit"; } interface PayPal { kind: "paypal"; email: string; } interface CreditCard { kind: "kart"; cardNumber: string; securityCode: string; } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 |
function DescribePaymentMethod(method: PaymentMethod) { switch (method.kind) { case "nakit": return "Nakit"; case "paypal": return 'PayPal = {email: '+method.email+"}"; case "kart": return 'Credit card='+method.cardNumber; } } |
Aşağıda görüldüğü gibi ilgili interfacelerden “PayCredit” ve “PayByPal” ödeme biçimleri sınıfları türetilmiştir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class PayCredit implements CreditCard { constructor(public kind: "kart", public cardNumber: string, public securityCode: string) { this.cardNumber = cardNumber; this.securityCode = securityCode; this.kind = kind; } } class PayByPal implements PayPal { constructor(public kind: "paypal", public email: string) { this.email = email; this.kind = kind; } } |
“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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
class BorSoftShop { element: HTMLElement; span: HTMLElement; constructor(element: HTMLElement) { this.element = element; this.element.innerHTML += "<b>Ödeme Şekilleri :</b> </br>"; this.span = document.createElement('span'); this.element.appendChild(this.span); } start() { //1. Alışveriş let myPayment = new PayCredit("kart", "1034543543","9999999"); this.span.innerHTML = DescribePaymentMethod(myPayment); //2. Alışveriş let myPayment2 = new PayByPal("paypal", "bora@borakasmer.com"); this.span.innerHTML +="</br>"+ DescribePaymentMethod(myPayment2); } } |
Örnek Ekran Çıktısı:
index.html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8" /> <title>BorSoft Shopping</title> <link rel="stylesheet" href="app.css" type="text/css" /> <script src="app.js"></script> </head> <body> <h1>TypeScript 2 BorSoft Alışveriş Merkezi</h1> <div id="content"></div> </body> </html> |
Sayfanın yüklenmesi durumunda, alışveriş işlemine aşağıda görüldüğü gibi başlanır.
1 2 3 4 5 |
window.onload = () => { var el = document.getElementById('content'); var shopping= new BorSoftShop(el); shopping.start(); }; |
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.
1 2 3 4 5 6 7 8 9 10 11 |
type Point = { readonly x: number; readonly y: number; }; class ConstVariables { orgin: Point; constructor() { this.orgin = { x: 0, y: 0 }; } } |
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.
1 2 3 4 |
moveX(p: Point, offset: number): Point { p.x += offset; return p; } |
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.
1 2 3 4 5 6 |
moveY(p: Point, offset: number): Point { return { x:p.x, y: p.y + offset } } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
class Circle { element: HTMLElement; span: HTMLElement; readonly radius: number; constructor(element: HTMLElement,radius: number) { this.radius = radius; this.element = element; this.element.innerHTML += "<b>Daire Alanı :</b> </br>"; this.span = document.createElement('span'); this.element.appendChild(this.span); } get area() { return Math.PI * this.radius ** 2; } writeArea() { this.span.innerHTML += "</br>" + this.area; } } |
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.
1 2 3 4 5 6 |
window.onload = () => { var el = document.getElementById('content'); var shape = new Circle(el, 2); //shape.radius = 12; //HATALI Değiştirilemez. shape.writeArea(); }; |
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.
Source: https://devblogs.microsoft.com/typescript/announcing-typescript-2-0/
Son Yorumlar