TypeScript’e Giriş

Selamlar;

Son zamanlarda AngularJS 2.0’ın TypeScript ile olan birlikte çalışması haberlerine istinaden bugünkü makaleyi yazmaya karar verdim. TypeScript dosyaları .ts uzantılıdır. Bunu halen TrabzonSpor olarak düşünen arkadaşlar olunca makalenin başlığı da şekillenmiş oldu:) Şimdi gelin isterseniz  Microsoft tarafından geliştirilen son stable sürümünün (1.4) 16 Ocak 2015’de çıkarılan bu javascript framework’ünü hep beraber inceleyelim.

Öncelikle yeni bir TypeScript projesini Visual Studio 2013 Update 4 sürümünde aşağıdaki gibi oluşturuyoruz.

Daha sonra Tools/ Extensions and Updates’den  aşağıdaki Web Essentials 2013 kuralım. Bu paket ile yazdığımız  typescript’in javascript’e convert olmuş halini hemen yanındaki bir pencereden takip edebiliriz.

Örnek ekran çıktısı aşağıdaki gibidir.

Aşağıdaki script’de ProductClass sınıfına ait 2 özellik constructor’ında atanmış ve window.onload’da content div’inin içine bu özellikler yazdırılmıştır. Dikkat ederseniz aşağıdaki değişkenler private olarak tanımlanmıştır. Direk erişilemedikleri için this. şeklinde erişilmektedirler.

Class:

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

Değişken Tanımlama ve Method():

Şimdi gelin kodu aşağıdaki gibi değiştirelim. Görüldüğü gibi GetReady() methodu ProductCar’a eklenmiş dönüş tipi :string şeklinde belirtilmiştir. Constructor’da ilgili method çağrılmış ve yine aynı sonuç alınmıştır.

Tsc.exe:

İstenirse projedeki .ts uzantılı typescript dosyası tsc.exe komutu ile javascript dosyasına kolayca çevirilebilir. Örnek amaçlı projemizdeki CarFinance.ts dosyası C:\’ye taşınıp aşağıda görüldüğü gibi .js uzantılı javascript dosyasına çevrilmiştir.

Bir başka önemli konu da ProductCar() methodunda yıl parametresi yerine string “Test” yazılır ise aşağıdaki gibi hata alınır. Çünkü _year:number yani sayısal bir parametre beklemektedir. Bu da typescript’in güzelliklerinden sadece biridir.

Aşağıda bir değişkenin typescript’de nasıl tanımlandığı gösterilmektedir.

Inheritance:

Aşağıda görüldüğü gibi Mercedes sınıfı ProductCar sınıfından extends tanımlı ile türetilmiştir. Constructor’da super tanımı ile türetildiği ProductCar sınıfına ait ilgili parametreler gönderilmektedir.

Yukarıda görüldüğü gibi Mercedes sınıfı constructor’ında YakıtTipi türünde bir enum parametre almaktadır. İlgili enum aşağıdaki gibi tanımanmıştır. Türetildiği ProductCar sınıfının constructor’ında tanımlanan content div’inin innerHTML’i ne Mercedes sınıfının constructor’ında Yakıt tipi bilgisi de eklenmektedir. Bunun için YakıtTipi[] enumunun ilgili value degeri alınmaktadır.

Enum:

Ekran çıktısı:

Sanzıman enum aşağıda görüldüğü gibi tanımlanmaktadır.

Generics:

Finance interface’ini aşağıdaki gibi oluşturalım: Dikkat ederseniz Generic 2 değişken <T> ve<Z> bu interfacede tanımlanmaktadır. Kısacası yakıtTipi ve sanzımanTipi istenen hernagi bir tip olabilir. Mesala farklı enum tipleri gibi.

CarPayment classını Finance interface’inden implements keyword’ü ile aşağıdaki gibi inherit alınır. Burada amaç aracın girilen km mesafesinde, belirlenen özelliklere göre  kaç TL’lik yakıt yaktığını hesaplamaktır. Switch-Case yapısı ile aracın yakıtTipi ve sanzımanTipine göre harcanan yakıt masrafı bulunur.

Aşağıda CarPayment sınıfından türemiş MercedesPayment sınıfı WriteFinance() methodu ile girilen km değeri ile yakılan toplam yakıt masrafını göstermektedir.

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

Buraya kadar Taype Script’de aşağıdaki konulara deyinilmiştir:

• Değişkenlerin nasıl tanımlandığına. Ve erişim kısıtlıyıcılara.
• Methodların nasıl tanımlanıp çağrıldığına.
• Classların bir başka class ve interfaceden nasıl inherit olduğuna.
• Constructor’da gelen parametreleri nasıl kalıtımla oluşturuldukları bir üst class’a gönderdiklerine.
• Enum yapısına.
• Generic tiplere.

Static:

Şimdi static yapıları inceleyelim. Aşağıda Yer olarak gidilecek X ve Y kordinatlarının tanımlandığı bir sınıf bulunmaktadır. Static kordinatlar Kordinat sınıfında tanımlanmıştır.

KmPayment class’ıda 2 yer arasında alınan toplam km yolu hesaplamaktadır.

CarPayment sınıfı aşağıdaki gibi değiştirilip KmPayment sınıfından ve Finance interface’inden türetilmiştir. Böylece constructor’da From ve To şeklinde 2 yer kordinatı tanımlanmış ve TotalPayment() methodundaki totalKm parametresi bu girilen kordinat farklarına göre KmPayment’da hesaplanıp atanmıştır.

Aşağıda MercedesPayment’da this.TotalPayment(this.toplamYol) şeklinde toplam alınan yol parametre olarak atanmıştır. Ve gidilen toplam yol da Km cinsinden this.toplamYol ile ekrana yazdırılmıştır. Böylece statick olarak tanımlanan kordinatlar, sınıf içerisinde parametrik olarak kullanılmıştır.

Örnek ekran çıktısı aşağıdaki gibidir.

Module:

Şimdi sıra geldi module konusuna. CarFinance.ts’de kullanılan enumlar yeni oluşturulan Enum.ts dosyasına aşağıdaki gibi konur.  Enbaşta tanımlanan module‘e CarModule adı verilir. Burda amaç çalışılacak dağıtık dosyaları guruplamaktır. Enum’un başında tanımlanan export komutu ile bu module’ün tanımlandığı  diğer yerlerde ilgili nesneye yani enum’a erişilmesi sağlanmıştır. Kısace bu enumlar aynı module ismine sahip diğer .ts dosyalarında da kullanılabilirler.

Enum.ts:

Bir de Cordinate.ts adında yeni bir type script dosya oluşturulmuştur. Burda da CarFinance.ts’de kullanılan static kordinatlar ve toplam yolu hesaplayan sınıf, harici bir başka .ts dosyasında yine CarModule’ü altında tanımlanmıştır.

Cordinate.ts:

Böylece CarFinanse.ts dosyası son halini aşağıdaki gibi olur: Yine tüm tanımlamalar aynı diğer .ts dosyalarda olduğu gibi CarModel altında tanımlanmıştır. Böylece diğer .ts dosyalara buradan erişilebilmektedir. Aşağıda görüldüğü gibi Cordinate.ts dosyasının kodları kısalmıştır. Module sayesinde kodlarda okunurluk artmış ve dağıtık çalışma imkanı sağlanmıştır.

index.html aşağıdaki gibi değiştirilir. Diğer .ts dosyalar doğru hiyerarşi ile sayfaya include edilir. Doğru hiyerarşi çok önemlidir. Çünkü birinde kullanılan class kendinden sonra tanımlı .ts dosyasında tanımlı ise hata oluşur.

Ekran çıktısı aşağıdaki gibidir. Görüldüğü gibi yapısal mimari haricinde hiçbir değişiklik olmamıştır.

TypeScript ile ilgili dikkatiniz çekmek istediğim birkaç konuyu aşağıdaki videoda anlattım. Umarım faydalı olur.

TypeScript ile kod geliştirmek client side tarafında gerçekten çok büyük bir ayrıcalıktır. Video’yu da izlediyseniz server side da mı yoksa client side da mı code geliştirdiğini anlamak gerçekten çok zor. Özellikle yüzlerce satır javascript kodu yazılacak ise TypeScript kullanılmasını şiddet ile tavsiye ederim. Böylece hem kodun okunabilirliği artar hem de server side tarafında code geliştirilirken ki zenginliğe client side tarafında da erişilmiş olunur.

İlgili kodlar aşağıdadır. Yeni bir makalede görüşmek üzere hoşçakalın.

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

Source: https://johnpapa.net/typescriptpost2/