TypeScript’de Cast İşlemleri Ve KnockoutJs

Selamlar;

Bugün TypeScript’de cast işlemleri ve KnockoutJS ile nasıl çalıştığı üzerine birkaç örnek yapacağız.

Çok basit toplama ve çıkarma işlemi yapan aşağıdaki gibi bir Index.cshtml view yaratıyoruz: “X” ve “Y” id’li iki input alan ve “Topla”,”Çıkar” buttonları bulunmaktadır. İşlem sonucu “OutPut” id’li bir div’in içine yazılmaktadır.

Şimdi sıra geldi aşağıdaki gibi bir Convert.ts dosyası yazmaya: Görüldüğü gibi “Calculator” adında bir class oluşturulmuştur. “X”,”Y” ve”output” adında 3 tane “HTMLInputElement” ve “HTMLSpanElement” şeklinde bir değişkeni bulunmaktadır. Constructor’ında “<HTMLInputElement>” şeklinde cast işlemi yapılarak gelen “ID” li nesneler ilgili değişkenlere atanır. “HTMLInputElemet” tipi F12 ile kaynağına gidilir ise “lib.d.ts” dosyasına erişilir. Burası typescript için çeşitli tanımlamaların yapıldığı bir kütüpahanedir. Daha sonra da wiredEvent() methodu çağrılır. Bu method’da “Add” ve “Subtract” buttonlarının clicklenme durumunda ilgili “X” ve “Y” değişkenleri toplanmış yada çıkartılmıştır. Elde edilen sonuç “output” spanının içine yazılır.

Aşağıda Convert.ts’in dönüştürüldüğü Convert.js karşılığı görülmektedir.

Code

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

screenTs

Şimdi bir de cast işlemine gerek kalmadan JQuery formatında aynı işlemi nasıl yapabiliriz onu inceleyelim. Öncelikle JQuery formatının tanımlanabilmesi için alttaki kütüpahanenin indirilmesi gerekmektedir. Böylece bir nesnenin “ID”‘si verildiğinde ilgili nesneye JQuery tipinde aşağıdaki gibi erişilebilir.

tspack

Aşağıda önceki örnekden farklı olarak  “IMathOperation” interface’i yaratılmış ve ilgili “X”,”Y” “wireEvents()” methodu tanımlanmıştır. Daha sonra “Calculator” class’ı bu interfaceden türetilerek ilgili tanımlamalar yapılmıştır. Burada ilgili input ve span nesnelerine Jquery vasıtası ile erişilmiş ve cast işlemine gerek duyulmadan“JQuery” tipinde ilgili değişkenlere atanmışlardır. Ve ensonunda da Topla ve Çıkar buttonlarının clicklenme event’ine ilgili operasyonlar tanımlanmıştır.

İlgili Calc.ts’in javascript’e çevrilmiş hali aşağıdaki gibidir:

ts3

Bir de birçok defa sorulan Knockout.js ile TypeScript’in nasıl çalıştığı konusunu hep beraber inceleyelim.

Öncelikle aşağıdaki paketler nugetden indirilir: Knockoutjs, Knockout.d.ts ve Knockout.d.ts(Update) paketleri. Knockout.d.ts ile TypeScript’de kullanılacak KnockoutJs’in tanımlanması sağlanmıştır.

knock

knockdef

Aşağıdaki gibi bir knockout.ts typescript dosyasını projemize ekliyoruz. Öncelikle “ITask” interface oluşturuyoruz. ‘id’,’firstname’,’lastname’,’fullname’,’starts’,’ends’ değişkenleri aşağıda görüldüğü gibi tanımlanmıştır. Dikkat edilmesi gereken nokta tüm değişkenler KnockoutObservable<string> olarak tanımlanmıştır. Ayrıca ‘programLanguage’ ve ‘selectedLanguage’ değişkenleri  KnockoutObservableArray<string> olarak tanımlanmıştır. Bu tipler önceden de bahsettiğim kodun en tepesinde referance olarak gösterilen knockout.d.ts‘de tanımlıdır. Daha sonra enum tipinde Job oluşturulmuş ve ilgili meslekler enum olarak atanmıştır. Son olarak TaskDetails sınıfı ITask interface’inden türetilmiş ve ilgili değişkenler constructor’ında atanmıştır. Burada dikkat edilmesi gereken nokta değişkenlere değer  ko.observable(title) ile atanmasıdır. “fullname”, “pureComputed()” function’ı ile “firstname” ve “lastname”‘in birleşmesi ile oluşturulur. Son olarak “programLanguage” ve “selectedLanguage” değişkenlerine JSON olarak ilgili değerler atanır.

Knockout.cs:

Ön yüzde Index.cshtml aşağıdaki gibi tanımlanmıştır. İlgili ekran görüntüsü aşağıdadır.

screen

Index.cshtml: Ad, Soyad, Tam İsim ilgili değişkenler ile “data-bind” attribute ile ilgili modeldeki propertyler ile bağlanmıştır. Tam isim ad ve soyadın birleşmesinden oluştuğu için ad veya soyad alanı değişince buna bağlı tam isim KnockoutJs “data-bind” özelliği ile otomatik olarak aşağıdaki gif’de de görüldüğü gibi değişmektedir. Meslek tanımlanan “Job enum” değerleriden, Programmer olarak tanımlanmıştır. Programlama dilleri JSON data olarak tanımlı Liste “programLanguage” data-bind=”foreach: programLanguage” şeklinde içinde gezilerek, ilgili span ve checkboxlar doldurulur. Span’ın text’i için data-bind=”text: $data” . Checkbox için ise data-bind=”checkedValue: $data, checked: $parent.selectedLanguage” tanımlanmıştır. Buradaki parent tanımlı root model’i temsil etmektedir.

Knockout

Yukarıdaki örneklerde type script’de cast’in nasıl yapılacağını ve JQuery tipi ile html elementleri nasıl atama yapacağımızı gördük. AngularJS 2.0 ile TypeScript kullanılabilecek diye o kadar sevindik. Halbuki KnockoutJs ile TypeScript zaten hali hazırda gayet güzel kullanılabiliyor. Yukarıdaki örnekde interfaceden bir class’ı türettik. Constructer’ında ilgili değişkenlere değerleri atadık. Enum tipini kullandık. Bunun yanında nesneleri data-bind ederek KnockoutJs’in gücünden faydalanıp, birinin değişmesi durumunda diğerlerinin nasıl etkilendiğini gördük.

Böylece geldik bir makalenin daha sonuna. Yeni bir makalede görüşmek üzere hoşçakalın.

 

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

5 Cevaplar

  1. Cagri dedi ki:

    Abi elinize saglik. Bir sorum olacakti. Kullanicilarin sepete attigi urunleri databaseye kaydetmek istiyorum ama aradaki baglari yapamiyorum. Bir urun tablosu var bir kullanici tablosu birde sepet tablosu nasıl yapılabilir

    • borsoft dedi ki:

      Selam Cağrı;
      Kabaca şöyle birşey:

      tbl_Urun:
      Urun_ID int,
      İsim varchar(50)

      tbl_Kullanici:
      ID int,
      İsim varchar(50)

      tbl_Sepet:
      ID int,
      KullaniciID int,
      UrunID int
      ref :(tbl_Urun.ID=tbl_Sepet.UrunID)
      ref: (tbl_Kullanici.ID=tbl_Sepet.KullaniciID)

  2. Cagri dedi ki:

    Abi birde empty bir project e asp.net identity tablosu eklenebilirmi?

  3. cagri dedi ki:

    abi web api 2 ile token based authentication konusunu işlermisin çok zor geliyor.

borsoft için bir cevap yazın Cevabı iptal et

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