Typescript 101

Typescript’e giriş seviyesinde olacak bu makalede typescript ile Modern Javascript kodlama ortamının nasıl yapılacağı typescript kodlaması örnekleri tipler ve diğer birçok başlangıç seviyesinde detay bu makalede verilecektir.

Typescript 101

Makalede örneklerimi verirken en aktif olarak kullandığım dil olan C#’daki özellikler ile karşılaştırmalar yaparak Typescript’i benimseyemenler için belki yol gösterici olmabilir düşüncesiyle özellikler ve örnekler anlatılacaktır.

Neden Typescript?

Biliyorsunuzki özellikle büyük projelerde kod ağırlık kısmını javascript’e verdiğinizde eğer herhangi bir Javascript compiler’ı olan Typescript, Babel v.b. compiler’lar ile çalışmıyorsanız o zaman bir süre sonra yönetilemez bir kod karmaşası ile karşı karşıya olacağınızı söyleyebilirim bu gibi durumlara düşmemek için neredeyse tüm OOP prensiblerini kullanabileceğiniz, okunabilirlik ve yeniden kullanılabilir yapılar oluşturabileceğiniz bir javascript compiler’ı kullanmanızı şiddetle öneririm. Sonuç olarak neden Typescript başlığına verilebilecek en net cevap Typescript kullanmak zorunda değilsiniz farklı olarak kullanabileceğiniz 10 javascript compiler’ını altta listeledim.

  1. TypeScript ❤
  2. Dart
  3. Elm
  4. PureScript
  5. CoffeeScript
  6. ClojureScript
  7. Scala.js
  8. Reason
  9. Haxe
  10. Nim

ModernJS Özellikleri Kullanma Özgürlüğü

ECMAScript standartları sürekli yenilenerek ve typescript’in bu özellikleri kendine implement edip biz gelişiricilere sunduğu Modern Javascript özelliklerini Typescript compiler’ı sayesinde özgürce kullanabiliyoruz.

Typescript Kurulumu ve Kullanımı

http://www.typescriptlang.org/#download-links adresinden Visual Studio ortamı için yada Komut Satırından kullanmak için ilgili paketleri kurup kullanabilirsiniz örnek olarak Visual Studio 2017 için https://www.microsoft.com/en-us/download/details.aspx?id=55258 adresindeki paketi kurabilirsiniz ama komut satırından typescript’i kullanmak için komut satırından npm paket yöneticisini kullanarak komutu ile typescript’in komut satırından kullanmamız gereken aracını kurabilirsiniz. Komut satırından typescript’i tsc komutu ile kullanabilirsiniz tsc komutuna ait parametrelere https://www.typescriptlang.org/docs/handbook/compiler-options.html sayfasından kolaylıkla ulaşabilirsiniz.

npm install -g typescript

Typescript cli compiler’ını kurduktan sonra ts uzantılı dosyayı compile etmek için alttaki gibi sözdizimi kullanabilirsiniz.

tsc main.ts

Birden fazla dosyayı compile etmek için alttaki gibi bir sözdizimi kullanabilirsiniz.

tsc main.ts main_1.ts

Bulunduğunuz klasör içerisindeki bütün ts uzantılı dosyaları compile etmek için alttaki komutu çalıştırmanız yeterlidir. Alt klasörlerdeki ts uzantılı dosyalara erişim sağlamayacaktır.

tsc *.ts

ts uzantılı dosyaları dinlemeye alıp her değişikilte compile işleminin gerçekleştirilmesi için alttaki gibi bir sözdizimi kullanabilirsiniz. Alt klasörlerin tümü altındaki ts uzantılı dosyalar dinlenmeye alınacaktır.

tsc --watch

İpucu: üstteki kodun daha kısa sözdizimi yer almaktadır oda tsc -w şeklindedir. Eğer tekbir dosyayı dinlemek isterseniz tsc main.ts --watch şeklinde dinlemeye alabilirsiniz belirli birden fazla dosyayı dinlemek için ise 2 komut üstünde yer alan örnek komutun sonuna --watch komutunu ekleyerek belirlediğiniz birden fazla ts dosyasınıda dinlemeye alabilirsiniz.


Genel Tipler ve Kullanımları

Basit Tipler

Her programlama dilinde yer alan basit tipler’in kullanılması ve değişkenlerimizin bu tiplerle oluşturulması ile kod geliştirmeleriniz daha sağlıklı ve ileriye yönelik olacaktır ayrıca tipleri belli olan değişkenler üzerinde intellisense’in sizi yönlendirmesi ile daha hızlı kod yazabileceksiniz. Basit tiplerden kastedilen ise boolean, number, string, Array gibi tiplerdir.


Tuple

C#’dan bildiğiniz üzere geri döndürdüğümüz tipler için eğer tek sefer kullanılması öngörülüyor ve 1-2 özellikden oluşacağını düşünüyorsak Tuple gibi yapıları kullanırız C# 7 ile birlikte dahada geliştirilen ValueTuples diye bir geliştiricilere sunulan yeni Tuple’lar ile artık tuple’larımız Item1, Item2 diye değilde kendimiz özel isim tanımlamaları yapabiliyoruz. Ama c#’da kendiniz bir isim tanımlayamıyorsunuz ve Item1, Item2 v.s. diyede erişemiyorsunuz aslında javascript çıktısına baktığınızda sonuç olarak bize bir dizi oluşturduğunu göreceksiniz tam anlamıyla bir tuple demek mümkün değil ama yinede yerine göre ihtiyaç karşılayabiliyor.


Interface

Interface yapısı bolca typescript tarafında sıkça kullanılmaktadır özellikle başkaları tarafından yazılan javascript plugin’lerinin typescript tarafında 100% intellisense’li çalışması için typescript tipleri ile plugin yapısına göre interface yapısı ile oluşturulduğunu göreceksiniz piyasada sıkça kullanılan pluginlerin interface yapılarının yer aldığı tanım dosyalarını http://definitelytyped.org/ adresinden bulabilir ve projelerinizde kullanabilirsiniz.

İpucu: interface yapılarının javascript tarafında bir karşılığı yoktur sadece intellisense açısından yardımcı olup geliştirmelerimizi sağlıklı yapmamıza yaramaktadır. class’lara interface yapılarının miras alınması için implements keyword’u ile class’lara interface içerisindeki tanımların oluşturulması sağlanabilir.

Class’ları interfaceden kalıtım alarak oluşturma

Çok basit bir senaryo oluşturarak ILog adında bir interface oluşturuyoruz basit ve anlaşılır olarak 4 türde loglama yapacağımız metodları tanımlıyoruz ve bu arayüzü ne tür loglama yapacaksak ilgili class’ı oluşturup class’ı implements keyword’ü ile ILog’dan miras alacağız ve böylelikle arayüz içerisindeki metodların gövde kod tanımlarını yapacağız.

Interface Genişletme

Interface yapılarını diğer farklı interface yapılarından kalıtım alıp genişletebiliriz birçok OOP programlama dilinde en temelde zaten mevcuttur bu kolaylığı birde Typescript tarafında nasıl kullanabildiğimize kısaca örnek kodla gözatalım.


Class

Contructor Tanımlama

Class tanımlarımız içerisinde constructor(yapıcı) metodlar tanımlayabiliyoruz. Alttaki Square adlı class’ımız içerisinde n adında number tipinde bir parametreye sahip constructor’a sahip olduğunu görüyoruz. Eğer extends komutunu kullanarak farklı bir sınıftan miras alıyorsanız super(); komutunu constructor’ımız içerisinde kullanarak miras aldığımız sınıf içerisindeki default contructor’ın çalıştırılmasını sağlayabilirsiniz default contructor haricinde sizin tanımladığınız constructor var ise parametreleride geçmeniz gerekecektir.

İpucu

Normalde contstructor parametresinde aldığımız değeri class nesnemiz içerisinde bir özelliğe atayarak geliştirmeler yapıyoruz ama typescript’in bu konuda bir kolaylığı mevcüt altta hem normal olarak kullanılan yöntem hemde typescript’in kolaylığı ile constructor parametresi tanımlanırken public yada private özelliğin nasıl tanımlanabileceğini görebilirsiniz.

Normalde C# ve diğer birçok programlama dilinde kullanıcıdan class örneği oluşturma aşamasında construuctor’dan bazı değerleri alıp bu değerlerin özellikler üzerinden saklanması için özelliğe değerin set edilmesi sağlanır altta typescript örneğinde yapıldığı gibi.

Üstteki tanımın typescript tarafındaki daha kısa hali alttaki gibidir ama dikkat etmeniz gereken bir durum var constructor’da tanımlanan parametre adından önce public yada private tanımını yapmanız gerekiyor yapmazsanız constructor parametresine karşılık gelen özellik oluşturulmayacaktır ayrıca public tanımlama yaparsanız örneğini aldığınız Person nesnesi içerisindeki özelliğe erişebilirsiniz alttaki örneğimizde name özelliği üstteki örnekte olduğu gibi public yani dışarıdan erişilebilir ama isMale özelliğine sadece Person nesnesi içerisindeki fonksiyonlar ve özelliklerin get, set blokları içerisinden kullanabiliriz.

Varsayılan ve Opsiyonel Parametre

Yeri gelmişken constructor ve fonksiyonlarda kullanılabilecek varsayılan ve opsiyonel parametreler tanımlayabilirsiniz. Alttaki örneği üstteki örnekten yola çıkarak yazdık constructor’da yer alan isMale parametresine varsayılan olarak true değerini verdik böylelikle bu parametreyi Person sınıfından yeni bir örnek aldığımızda name parametresini doldurup opsiyonel olarak isMale parametresini doldurmak zorunda değilsiniz zaten varsayılan değerinin true olduğu belirtmiştik.

Abstract Class

Property Erişim Belirleyiciler(Accessors)

C#’daki gibi bir özelliğin get-set bloklarını ayarlayabiliyoruz değer set etme esnasında encapsulate edip değer ile ilgili gerekli kontrollerimizi gerçekleştirebiliyoruz.

Readonly Property

readonly tanımı sayesinde sadece okunabilir özellik tanımlama.

Generic Class

C#’daki List<T> mantığında bir generic sınıf oluşturalım.

 

Typescript 101
5 (100%) 1 oy

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.