TypeScript nedir? ve Bazı Tavsiyeler

Geçen dönem için de şimdiye dek çalıştığım en büyük JavaScript kod yapısını içiren bir projede çalıştım. Hem sunucu tarafında hem istemci tarafında tamamen Javascript kullanılan bu projede(MEAN stack), zaman geçtikçe ciddi zorluklar la karşılaştık.

Takım daki hemen hemen herkes (Yaklaşık 40 kişilik bir yazılımcı grubu) .NET yada Java kökenliydi . Ben nispeten Javascriptle daha fazla çalışmış biri olarak , ve yazılan sistemin Javasciptin dil yapısı gereği bazı sorunlara açık olacağını bilerek başlamıştım işe. Bu süreç, sonrasında bizi “uygulamanın en azından bir kısmı” için TypeScipt e taşıdı.

Özellikle büyük projelerde ve artık Javascript i sadece istemci tarafında DOM için kullanmayı çok dan geride bıraktığımız bir dönem de, Takım daki arkadaşların hemen hemen hepsinin Javascriptin “Korkutan” global scope kavramı , namespace ve interface benzeri , kod organizasyonu ve uygulamanın iş yükünün soyutlanması için önemli yetenekler den yoksun olması gibi bir çok sorunla karşılaştık.

Başka bir sorun da, aşağı yukarı bir çok dil de klasik hale gelmiş haliyle OOP in nimetlerini , Javascriptle kullanmaya kalkıştığınız da ; Javascript in Inheritance ve OO için bir standartının olmaması ve kodu yazdıktan sonra dönüp baktığınız da “ben ne yapmışım, ne yazmışım?” diyebileceğiniz durumlarla karşılama ihtimaliniz çok fazla olması.

Aslında illa , Class based OOP yi kullanarak uygulama yazma zorunluluğunuz yok Javascript ile uygulama geliştirmek için. Hatta functional olarak Javascript yazmak çok daha kolay. Ama gelin görünki aşağıdaki gibi genelleyebileceğimiz bazı sorunlar nedeni ile Javascript dili için bazı iyileştirilmelere ihtiyacımız var;

  1. Javascript son bir kaç yıla kadar, bir çok gelişitirici için “birincil dil” değildi. Hatta birincil bir Uygulama geliştirme dili olarak da görülmedi. Web dünyasında “scripting” için(DOM manipulation ve interaction) kullandığımız bu dil artık tam teşekküllü büyük uygulamalar yazabileceğimiz bir ekosisteme sahip hale geldi.
  2. Bugün javascript ile uygulama yazan yada yazmak zorunda olan geliştiricilerin kullandıkları birincil diller (C++, Java, C# vs.) çok güçlü alt yapılara ve güçlü OOP tasarımlara sahipler. Özellikle kod organizasyonu başta olmak üzere, heme takım halinde çalışmaya hemde modüler uygulama geliştirmek için ciddi kolaylıklar sağlamaktalar(Class based OOP tüm özellikleri, Namespaces, packages, Dll ve daha başka bir sürü imkan ve yetenek). İşte bu dillerden gelen geliştiriciler bu güçlü alt yapıyı Javascipt içinde bulamayınca bocalayırlar.
  3. Ayrıca, Javascirpt ile yazılan uygulamalar(we genel olarak web uygulamarı) gittikçe daha büyüdüğü ve komplex bir hal aldığı için, birincil dilinizdeki bu yetenekleri sadece özelediğiniz için değil bu tür büyük uygulamarın sorunlarını çözmek adınada aramaya başlıyorsunuz.
  4. Veri yapılarının eksikliği sorunu var birde, C# yada Java gibi dillerdeki zengin alt yapının yanına bile uğrayamaycak kadar sade bir yapısı var Javascriptin. Herşey bir ” { } ” ve nasıl isterseniz öyle kullanın dercesine bir çok ihtiyacı “Data Structures” gelişitiriciye bırakmakda.

Yukarıdaki, maddelerin sayısını artırabiliriz şüphesiz ama genel olarak bu 4 madde bizim yazımız için yeterli. İşte yukarıdaki eksikliklerden dolayı Javascript in yeni sürümleri ile (ES6 ve ES7) bir çok iyileştirmeler yapılma sürecinde. Özellikle “dahili modül sistemi – Module Import/Export” ve klasik OOP den alışık olduğumuz Class vb kavramlar yeni sürümle birlikte kullanılmaya başlandı(ES6).

Sadece sözdizimi/syntax değil ayrıca dil yapısı oalrakda yeteneklerini artırmakta bu yeni sürümlerle Javascript. Örneğin, bir kaç yeni veri yapsı bazı yardımcı sınıflar ve fonksiyonlar, promise yapısı vs. gibi bir çok iyileştirme mevcut, yenilik ve iyileştirmelerin genel bir özetine bu adresten bakabilirsiniz.

Peki bu yenilikler ve iyileştirmelere rağmen neden TypeScript e ihitiyacımız var? Typescript neden hala ciddi bir alternatif? Neden özellikle “Frameworkler ve herkesin kullanımına açılacak kütüphanler ” TypeScriptle yazılmaya başlandı? Yine maddeleyecek olursak;

  1.  Javascriptin yeni sürümü bir çok iyileştirmeler içersede hala güçlü bir dil yapısının tamamlanması için eksiklikleri var, ayrıca bazı yenilikler ilk defa yapıldığı için hala iyileştirilmeye ihtiyaç duymakta.
  2. Yeni özellikler ve iyileştirmeler hala tüm taraycılar ve diğer Runtime lar için (Node.js) %100 kullanılabilir durumda değil. Tarayıcılar ve Node.js bu değişiklikleri parça parça bünyelerine katmaktalar. Ayrıca eski tarayıcılarında hala kullanıldığını(bu yeniliklerin büyük bir kısmını desteklemediklerini) de unutmayın. Hangi platformun neyi nekadar desteklediğine bu adresten bakabilirisniz . Örneğin benim tarayıcım (Chrome un son sürümü) ES6 in %93 ünü detskelerken ES7 nin sadece %19 unu desteklemekte, iki ekran görüntüsünden de görebilirsiniz ;  es6es7
  3. Statik tip desteği. Bu konu göreceli olsada, statically typed languages (C#, Java vs.) dillerden gelenler için hala aranan bir özellik. Tip desteği, Javascript dinamik bir dil olduğu için  yeni sürümlerinde de olmayacak.

Typescpript, büyük ölçekli javascipt projelerinde  işte buna benzer sorunları çözmek, geliştirme sürecini daha verimli hale getirmek için Microsft un kendi iç projelerinde kullanmak adına geliştirdiği sonrasında Open Source olarak herkese açtığı bir language to language compiler / dil den dile dönüştürücü diyebiliriz. Şu 5 noktaya dikkat ederek devam edelim;

  1. TypeScript yeni bir dil değildir!
  2. Yeni bir runtime a sahip olmayacağız.
  3. tüm javascript kodlarımız geçecerli bir TypeScript kodu olarak kullanılabilecek.
  4. TypeScript ile aşağıdaki resimde de görebeleceğiniz gibi, Javascriptin bugünkü en yaygın kullanılan sürümü(ES5) + Yeni Sürümü(ES6) + bir sonraki gelecek sürümünün bir kısmını (ES7) + TypeScript ile gelen yenilikleri beraber kullanabileceğiz  . typescript
  5. Gün sonunda, yazdığımız kodları , hemen hemen tüm tarayıcalarda ve node.js sürümlerinde çalışabilecek “Javascript ES5” sürümüne dönüştürebileceğiz.

Gördüğünüz gibi TypeScipt aslında “gayrı resmi olarak” Microsoft ve C# geliştiricilerin JavaScript i “görmek istedikleri halde” kullanmamıza imkan sağlayan bir araç da diyebiliriz.

Bütün bunlarla birlikte, TypeScript dünyasındaki son gelişmelere ve tartışmalara baktığımızda, TypeScript in, C# ı andıran özelliklerinin ,”Framework” yada “büyük takımlar içinde” kütüphanler yazma işlemleri için tavsiye edilsede, genel olarak Web ve Node.js dünyası için aşağıdaki sıralamaya çalıştığımız noktalar dikkate alınarak kullanıldığını görebeliriz;

  1. TypeScript, geliştirme ortamı için geçerli bir araç. Yani yazdığımız kod javascripte dönüştürülüp çalışacak. Javascript in dil yapısında olmayan tip desteği, interface vs gibi kavramlar , dönüştürülen kod da simüle edilmeye çalışılmayacak. Kod için de kullandığınız interface sadece geliştirme sürecinde geçerli olacak örneğin.
  2. TypeScript içinde “zorlama” diyebileceğimiz bazı yapılar mevcut. Örneğin; Mixins, Declaration Merging ve zorlam Generics kullanımı gibi Bu ve buna benzer zorlamaları yazı dizisinde kullanmayacagız. Sizlerde çok çok mecbur değilseniz ve Framework yada genel kullanımlı kütüphanler yazmayacaksanız kullanmaktan kaçının. (örneğin bir Observable oluşturuyorsanız, gerçekte ve pratikte hiç bir karşılığı olmayn generic tip desteğini verip vermenin yada extend tiplemenin kodu karışık bir hale getirmekden ve insanları yanlış yönlerdirmekten başa hiç bir işlevi olmayacaktır.)
  3. 2.madde deki uyarı, pratik den gelen bir uyarı. TypeScript i yeni bir dil(JavaScript e C# muamelesi) veya yeni bir platform(JS run-time a CLR muamelesi yapmak) gibi bir kullanıma girmekten kaçının. Yazdığınız kodun sonrasında diğer geliştiriciler için anlaşılmasında çok ciddi sıkıntılara sebeb olamak ta. Javascript in esnekliğini de kaybettirmek te vs.
  4. TypeScript i, olabildiğince; geliştirme süreci için “tip desteği”, “standartlaştırma” ve ES6/ES7 ile gelen yeni özellikleri kullanabilmek adına, alet çantanız da taşıyın.
  5. Eğer her hangi bir şey yapmayacaksa, sırf tip desteği ve intellisense için “yeni sınıflar ” oluşturmayın. Olabildiğince fazla interface kullanın.
  6. nihayi kod içinde dağıtıma çıkmadan önceki halde; mutlaka yorumların da typescript dosyasından javascript içine taşınmasını sağlayın.

Şimdi aşağıda ki TypeScript koduna bır bakalım;

function CreateUser<u extends User>(user:{new(): u;},GamerTag: string, LiveID: number,UserType:UserTypes,IsGoldMemeber:boolean): u
 {
 var newUser: u;
 newUser = new user();
 return newUser;
 }

yada aşağıdaki yapıya;

map: <U>(f: (el: T) => U) => Box<U>;
map<U>(f: (el: T) => U): Box<U>;
map: {<U>(f: (el: T) => U): Box<U>};

Yukarıda ki kodlar gecerli TypeScript kodu olsada, ilerisi için ciddi problemlere açık kodlar. Yukarıda bahsettiğim zorlama”  tabirini hatırlayın. Şöyleki; TypeScript JavaScript  uygulamalarının geliştirme süreci  için bize tip desteği , ES2015 in yeni özelliklerini kullanmayı ve uygulamamızı daha düzgün bir yapıda geliştirmemiz için yardımcı oluyor.

Yukarıdaki ne benzer bir yapı(sanki Javascipt değil C# yazıyoruz) ile yazdığımız kodlar ise “Sanki yeni bir dil veya run time için kod yazıyormuş” izlenimi veriyor. Sıkıntı sadece izlenim olarak değil elbette, Yeterli JavaScript bilgisi olmayan birisi, C# yada Java bilgisine dayanarak

newUser = new user();

yada

function CreateUser<u extends User>

ile yukardaki kod a baktığın da şunu düşünebilir;  tıpkı  kendi dilin de alışık olduğu gibi(örneğin C#) “Object base inheritance” yaptığını düşünebilir . Yada aşağıdaki koda bakıp , “private” değişkenlerin tıpkı C# yada Java daki gibi(gerçekten) “private” olarak tepki vereceğini, UserType tip kontrollünün çalışma zamanın da da geçerli bir kontrol olduğunu düşünebilir.

class Ornek{
private isim:string
UserType:UserTypes

Halbuki, Javascript içinde gerçek anlamda, C# yada Java daki gibi 100% private değişken tanımlamak(davranış olarak) mümkün değildir. Başka bir sıkıntı ise, Java veya C# da new OrnekSınıf() çağrısında çalışan constructor method ve elde ettiğimiz etki, JavaSciprt içinde ki new OrnekClass()  ile çok farklı etkiye sahiptir.

Benzer etkiyi  , JavaScript de Constructor Functions Pattern dediğimiz tasarım kalıbını/yöntemini kullanarak oluşturmaya çalışırız. Bu tür muhtemel sorunlara inanın daha bir sürü aday ekleyebiliriz.

Başka bir örnek ise, dağıtıma çıkan kodun, dağıtım ortamında müdehale gerektirdiği durumlarda, TypeScript değil JavaScript yazmak zorunda olmanız. Yazdığınız TypeScript kodunu JavaScipt için de karşılığını bularak/anlayarak güncellemek yada mevcut hatayı gidermek bazen hiç kolay olmayacaktır.

Typscript vs Babel vs X…

Typescript ve diğer alternatiflerini uzun uzun karşılaştırmaya gerek yok aslında , aşağıda bir kaç madde olarak sıralamak yetecektir;

  1. Babel, ES6/ES7 ile gelen yeni özellikleri kullanmanıza imkan vermekte ve tıpkı TypeScript gibi yazdığınız kodu ES5 olarak çıktı almaya da imkan vermekte fakat;
    1. TypeScipript gibi Javascripti esneten, yeni özelleikleri ekleyen bir imkan sunmamakta. (Tip desteği, Interfaces vs. gibi)
  2. ClojureScript , Scala.js  yada Opal : bu kütüphaneler, Babel ve TypeScript den farklı olarak Javascript yazmadan Javascript yazmanıza imkan sağlamaya çalışmakta.
    1. ClojureScript  ile Clojure ile yazdığınız kod, Javascript e
    2. Scala.js  ile, Scala dilini kullanarak yazacağınız kod Javascript e
    3. Opal ile ise Ruby ile yazacağınız kod Javascript de dönüştürülmekte.
    4. Kısaca bu 3 platform Ruby yada Scala veye Clojure biliyorsanız Javascript e hiç bulaşmadan bu diller ile kod yazıp, yazdığınız kodu Javascript e dönüştürmenize imkan vermekte.

TypeScript Kurulum ve Kullanım

Typescript için gereken tek ihtiyacımız “TypeScript Compiler ” yada kısa ismiyle “tsc” . Tsc yi sisteminize kurmak için yapmanız gerek tek şey aşağıdaki komut ile sisteminize indirmek;

npm install -g typescript

yukarıdaki komut ile  tsc  npm aracılığıyla sisteminize inmiş olacak ve kullanıma hazır hale gelecektir. TypeScript Compiler ın yazdığımız kodu işleyebilmesi için, kodlarımızı, “.ts” uzantısyla kayıt edeceğiz.  Şimdi örnek olması amacıyla bir typescript dosyası oluşturalım, ben ornek kolay olsun diye su sekild ebir klasor olusturdum:   D:\blog\TypeScipt\ . Bu klasörün içinde ornek.ts isimli bir dosya oluşturup aşağıdaki şekilde örnek bir kod yazdım;

D:\blog\TypeScipt\ornek.ts

interface Iinsan {
 isim:String;
 soyad:String;
 toString():void
}

class Ogrenci implements Iinsan{

 constructor(public isim:String, public soyad:String) {
 }
 
 toString(){
 console.log(`${this.isim} ${this.soyad}`);
 }
}

const o1:Ogrenci = new Ogrenci("Ali", "Korkmaz");
o1.toString();

Yukaridaki kodu kayıt edip, komut satırından aşağıdaki gibi tsc  yi çalıştıralım.

 tsc ornek.ts -out ornek.js

yukarıdaki tsc çağırımı ile, TypeScript Compiler, ornek.ts isimli dosyamızı alacak ve Javascript e dönüştürecek. Komut içinde kullandığımız -out ornek.js  parametresi ile dönüşümü yapılan kodu , ornek.js isimli bir javascript dosyası olarak aynı klasöre kayıt edecektir. İçeriğide aşağıdaki gibi olacaktır;

D:\blog\TypeScipt\ornek.js

var Ogrenci = (function () {
 function Ogrenci(isim, soyad) {
 this.isim = isim;
 this.soyad = soyad;
 }
 Ogrenci.prototype.toString = function () {
 console.log(this.isim + " " + this.soyad);
 };
 return Ogrenci;
})();
var o1 = new Ogrenci("Ali", "Korkmaz");
o1.toString();

Gördüğünüz gibi, kullanımımız bukadar kolay. Bir kaç yazı daha yazıp TypeScripti tanımaya devam edeceğimiz için “ornek.ts” içindeki kod yapısını ve TypeScript in yeteneklerini o yazılara bırakıyorum. Bir de , TypeScript i muhtemelen böyle komut satırından değil ya Visual Studio, Webstrom vs gibi bir IDE ile entegre olarak yada, Gulp vb. bir build tool ile birlikte kullanacağımız için, komut satırından tsc yi kullanmakla ilgili çok kafa karışıklığı olmayacaktır. Ben sadece arka planda ne oluyor onu göstermek istedim.

.ts uzantılı bir dosyamıza kodları yazıp, tsc  ile komut satırından derliyoruz. Hepsi bu.

Son Olarak, bir şeyi tekrar ederek bu yazıyı bitirelim;

JavaScript gelişmeye çok hızlı bir şekilde devam ediyor, daha ciddi bir süre daha hayatımız da olacak. Her zaman JavaScript yazdığınızı aklınız da tutun ve ister TypeScript ister ClojureScript veya başka bir araç kullanın , Günün sonunda JavaScipript i daha iyi anlamaya çalışın.

typescript-es6-es5

Yukarıdaki resimden de anlaşıldığı gibi, “TypeScript” geliştirme aşaması için JavaScript dünyasına bazı eklemeler ve kolaylık sağlıyor. TypeScript e C#,  JS runtime CLR muamelesi yapmamaya özen göstermek lazım.

Bende bu yazı dizisinde, yukarıda bahsettiğim konuları dikkate alarak, javascript odaklı bir anlatım yapmaya gayret edeceğim.

 Javascript ile uygulama geliştirdiğimiz süreç içinde daha efektif ve daha düzenli bir yapıda kod yazmak için kullanabileceğimiz çok faydalı bir araç “TypeScript” . Ne yeni bir dil nede yeni bir run-time!

Bir sonraki yazıda, TypeScript i tanımaya devam edelim inşallah.

 

 

2 thoughts on “TypeScript nedir? ve Bazı Tavsiyeler

  1. Yazınız için teşekkürler. Karar vermeme çok yardımcı oldu. Karar vedim ve biraz daha bekliyeceğim. Düz javascript yazmaya devam. Bence standartlar oluşana kadar bu belirsiz ortama dalmanın anlamı yok. En iyi yol bildiğiniz yol diyip ES5 e üzerinden devam

    1. Faydali olmasina sevindim. ES5 ve yil sonuna dogru ES6 i da katarak devam etmek ve dediginiz gibi birazdaha bazi seylerin oturmasini beklemek bencede mantikli.

Leave a Reply

Your email address will not be published. Required fields are marked *