TypeScript’i Derinlemesine İnceleme

Herkese selamlar;

Günümüzde web uygulamalarında javacriptin yeri azımsanmayacak kadar büyüktür. Javacript strongly-typed bir dil değildir. Doğal olarak kapsamlı ve büyük projelerde işler çok karmaşıklaşmaktadır. Class, Interface ve Modüller gibi birçok kavramın kullanılamaması bunun enbüyük nedenlerinden bazılarıdır.

TypeScript Visual Studio geliştirme ortamında kullanılabilmesi, compile zamanında strong-type olarak yani class, interface, module gibi tipler oluşturulabilmesi, runtime’da klasik bir Javascript gibi çalışıyor olması  ve Intellisense özelliği ile kodlama kolaylığı sağlaması ençok tercih edilen javascript frameworklerinden biri olmasını sağlamaktadır. Aklıma gelmişken refactoring TypeScript için gerçekten çok başarılıdır.

Öncelikle Add NewItem TypeScriptFile deyip .ts uzantılı dosyamızı projemize aşşağıdaki ekranda görüldüğü gibi ekliyoruz.

TypeScript

Şimdi Örneğimize geçelim.Eklediğimiz operation.ts dosyasına aşşağıdaki kodları ekleyelim.

result1

Yukarıda görüldüğü gibi öncelikle  iki tane interface yarattık. Bunu javascriptte yapıyoruz:) Control interfaceimizde generic tip tanımlanmaktadır. Textbox interface’ini Control’den türettik. Extends komutu bu işe yaramaktadır. Ayrıca Textbox interface’ine bazı propertyler ekledik. TextArea interface’ini ilk yaratırken Font property’sine değer atmaz isek  hata oluşur. Hata oluşmaması için TextArea interface’nin türediği, TextBox interface’inde Font property’si aşşağıdaki gibi eklenmelidir. Çünkü required dır.

Ayrıca TextArea interface’i Rule interfaceinden türetilmiştir. Ve isMultiline dönüş tipine göre console yazılmaktadır.

Görüldüğü üzere TypeScript ile aynı strong-type dil gibi çalışılmaktadır.

Uygulama çalıştırılınca

operation.ts==>operation.js’e

dönüştürülür.

 

point-type-model-01-initial1

 

Dönüştürülen kod aşşağıdaki gibidir.(operation.js):

Şimdi biraz da classlarla uğraşalım.

result3PNG

Yukarıda görüldüğü gibi CustomControl‘umuzu Control‘den türettik. Ve constructor’ında property değerlerini atadık. Dikkat ederseniz cnt.cutText’e erişememekteyiz. Erişebilmek için aşşağıda görüldüğü gibi bir değişiklik yapmalıyız. Böylece CustomControl methodlarına erişebiliriz.

result4

Şimdi aşşağıda görüldüğü gibi classımızdan inheritance yapalım:

Yukardaki kod üzerinde biraz konuşalım.BoraControl CustomContro’den türemiştir(extends).Constructor’ında (super) komutu ile base anlamına gelen yaratıldığı classın constructor parametrelerini göndermiştir.

private erişimli bkName parametresine text değeri atılmıştır.Böylece cnt2. denince bu değişkene erişilemez.

Ve kendine özel Go() methodu çağrılmıştır.Bu Go() methodunda atanan text’i değiştirmiştir(cutText(2) methodu ile).

Ayrıca base yani super’daki text değirine dışardan erişmek için public bir method’a ihtiyaç vardır.Örnek kod parçacığı aşşağıda gösterilmektedir.

Sizce burda çıktı nasıl olur?

Yani Türetilen sınıfın property’si değişti.Türeten sınıfın ve türetilen sınıfın yani BoraControl ve CustomControl’ün text’i ne olur?

result5

Görüldüğü üzere iki side değişir.Çünkü referans değerleri ile birbirlerine bağlıdırlar.

Kodumuzu aşşağıdaki gibi değiştirir isek:

Bu durumda herhangi bir hata ile karşılaşmayız. Çünkü BoraControl’ü ait private bkName değiştirmemiz base class’ı ilgilendirmez.

result6

Biraz da static yapılar ve enumlar üzerinde konuşalım:

Örneğimizde yapılan aktiviteler ile toplam yakılan kaloriyi yazdırıcaz.

Cordinat‘diye bir static sınıf yaratalım. Bu gidilecek yerlerin x,y şeklinde kordinatları olsun. Bir nevi enum gibi çalıştırıcaz.

Activite diye enum’umuz var.Value değerleri km’de yakılan kalori miktarını tutsun[Run,Walk… gibi].

RunKeeper classımız var.Bu aslında bizim esas işlemi yapacak tool’umuz. Static home parametresi [x,y] değerlerini içeriyor. Başlangıç noktamız.Ve erişimine dikkat eder isek =>

Static yapıya erişim RunKeeper.home.x veya RunKeeper.home.y

private kmCalori  sınıfa ait km’de yakılacak kalori tutulur.constructor’da constructor(calorie: number= 5)  eğer parametre null ise default 5 değeri atanmıştır.

getTotalRunDistance() verilen kordinatlar  ile home’a olan mesafeye göre toplam kat edilen yol km cinsinden hesaplanır.

3. Farkıl kullanım şekli tanımları aşşağıdaki gibidir.Hepsi de sonuçta yakılan toplam kaloriyi yazdırır.Örnek kod aşşağıdadır.

  1. getTotalCaloriCordinate()  direk kordinatlar girilerek çağrılmıştır.RunKeeper() yeni yaratılırken constructor’a parametre geçilmediği için kmCalorie default olan 5 değerini almıştır runTool.getTotalCaloriCordinate(20, 25)); ile de toplam katedilen mesafe getTotalRunDistance() ile hesaplanıp, km’de yakılan kalori ile çarpılıp sonuca gidilmiştir.
  2. getTotalCaloriPlace() points girilerek çağrılıyor.Points’de Cordinate static classındaki point verilerek katedilen mesafe getTotalRunDistance() ile hesaplanmıştır. runTool.getTotalCaloriPlace(Cordinate.Park.point)); ile de toplam katedilen mesafe km’de yakılan kalori çarpılıp sonuca gidilmiştir.
  3. getTotalCaloriActivite()’miz enum olan Activite’den, km’de yakılan kalori değerini bekliyor hem de yine point değeri dönen Static Cordinate ‘den kat edilen yol getTotalRunDistance() ile hesaplanıyor. runTool.getTotalCaloriActivite(Activite.RideMotorCycle, Cordinate.Job.point)) ile de toplam katedilen mesafe km’de yakılan kalori çarpılıp sonuca gidilmiştir.

Bu üç örnekle static ve enum objeleri nasıl kullanabileceğimizi aşşağıdaki örnekte olduğu gördük.

Örnek Ekran çıktısı aşşağıdaki gibidir:

result1

 Bir de bu işlemi Module’lere bölüp yapalım:

Adından belli olduğu üzere işlemlerimizi farklı .ts dosyalara bölücez:Projemizde \Scripts\Modules altına .ts dosyalarımızı yaratıyoruz.

Capture

Tek Tek dosyalarımıza bakalım:

Points.ts:

module Operate altına, tüm kullanılacak dosyaları aşşağıda görüldüğü gibi eklenmiştir. Bu eklenen class ve enumların başına export tagı konulmuştur. Amaç, dağıtık uygulamalarda dışardan erişimi sağlamaktır.

RunKeeper.ts:

Burada işlem önceliği çok önemlidir. Yukarıda görüldüğü gibi önce ortak kullanılan classlarımızı yarattık. Bunlar diğer classlarımızda kullanılıcak olan operational classlardır. Bir de dikkat ederseniz private olarak tanımlanan değişkenler ortak kullanımda artık public olarak tanımlanmışlardır. Amaç diğer classlardan da erişim sağlanmasıdır.

Coridinate.ts:

Yukarıda görüldüğü gibi dikkat ederseniz var runKeeper=new Operate.RunKeeper(); olarak yaratılıp kullanılmıştır. Ayrıca RunKeeper’da kmCalorie public olmasa idi runKeeper.kmCalorie şeklinde erişemezdik.

İki class birden burada aşşağıdaki gibi  tanımlanmıştır.

Place.ts:

 Activate.ts:

Gene burada enum’da tanımlanmıştır.

Hepsinin kullanıldığı esas işlemin yapıldığı ts aşşağıda görüldüğü gibidir.

global.ts:

Burda dikkat edilmesi gereken nokta diğer kullanılacak .ts dosyalar reference path şeklinde import edildi. Ve kullanılacak sınıflar tek tek yaratıldı.

Gelelim bu .ts konucağa sayfaya.Ben Yeni bir Index2 view’ı yarattım.  Burada ts dosyaları eklemenin birkaç yolu vardır.

1.Tüm ts’leri tekbir paket altında toplayan console komutu.

tsc –out global.js global.ts

2.Bütün .js dosyalarını sayfaya doğrı sıra ile tanıtmak. Hiyerarşi çok önemlidir.Örnek kod aşşğıda görüldüğü gibidir.

Ekran Çıktısı aşşağıdaki gibidir.

result1

Görüldüğü üzere javascript’ini yoğun olarak kullanıldığı projelerde refactoring, kodun anlaşılabilmesi, çalışma kolaylığı, autocomplete ve strong-type dil desteğinin gücü typescript’in , ilerde çokça kullanılacağının en büyük kanıtıdır.

Geldik bir makalenin daha sonuna.

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

Source Code:http://www.borakasmer.com/projects/TyepScript.rar

 

Herkes Görsün:

Sevebilirsin...

Bir Cevap Yazın

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