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.

ver

TS

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.

essential

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

ts2

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.

result

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.

tsc

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.

car2

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

ts-grammar

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ı:

Untitled

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:

Untitled

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.

Untitled

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.

Module

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/

 

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

11 Cevaplar

  1. Murat dedi ki:

    Elinize sağlık hocam.
    Çok güzel bir paylaşım olmuş. Bunca emeğinize ve harcadığınız vakte değdiğini bilmenizi istedik. Ekipcek okuduk. Birazdan da yazıcaz. Makaleden çok daha üstün birşey olmuş hocam.

    İyi çalışmalar.

    • borsoft dedi ki:

      Teşekkürler Veli. Mümkün olduğunca anlatmaya çalışıyorum.
      Takıldığınız bir konu pşursa sormaktan çekinmeyin.
      İyi çalışmalar.

  2. Ceyda dedi ki:

    Bora Hocam Selamlar;
    Çok güzel bir yazı olmuş. Çok detaylı ve açıklıyıcı. Video’yu izlerken cient side bir uygulama geliştirildiğini anlamak cidden çok zor:) TypeScript harika bir frameworkmüş. Yine yep yeni bir konuya harika bir açıklık getirmişiniz.

    Elinize sağlık.

    • borsoft dedi ki:

      Teşekkürler Ceyda.
      Aslında aylar önce typescript ile ilgili makale yazdım. Ama o biraz ileri düzeydi.
      Bu makalede herşeyi baştan aldım.

      İyi çalışmalar.

  3. Veli dedi ki:

    Hocam Selamlar;
    Elinize sağlık çok güzel bir yazı olmuş. TypeScript neymiş be diyorum daha da başka birşey demiyorum.
    Yine en güncel konular ve sizin çok değerli yazınız.

    İyi çalışmalar.

  4. Abdullah dedi ki:

    Elinize sağlık, çok güzel bir yazı fakat, TrabzonSpor’ a yaptığınız gönderme hiç hoş olmamış.

    • borsoft dedi ki:

      Selam Abdullah;

      Ben futboldan malesef hiç anlamam. Uzaktan yakından alakam yok. O yüzden gönderme yapabilecek bir konumda değilim. Sadece .ts diyince arkadaş bunu dedi. Ben de onu ilettim. Hepsi bu. Yani daha .ts uzantinın ne anlama geldiğini bilmediği için başlangış seviyesi manasında TypeScript’e Giriş. Kesinlikle argo bir durum yok. Hiçte sevmediğim bir dildir. Özellikle bloğumda.

      İyi çalışmalar.

  5. İsmail KAYA dedi ki:

    Videoları 1080 çözünürlükte yükleyebilir misiniz?
    Biraz bulanık görünüyor.
    Teşekkürler.

    • borsoft dedi ki:

      Selam İsmail,

      Bakıyım elimde source varsa yükliyim. Biraz üstünden vakit geçmiş.

      İyi çalışmalar.

  6. Eray dedi ki:

    Harikasınız hocam…

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.