1. TypeScript’e Giriş

Bu makaleyle birlikte, gerek front-end, gerekse de back-end tarafında kabul görmüş TypeScript konusuna giriş yaparak, takip eden sıralı her bir makale ile TypeScript’e olan hakimiyetimizi artırıp, bloğun geri kalanında anlatılan konuları anlayabilmek için gerekli olan ön gereksinimleri tamamlamaya çalışacağız.

Not: Bu bölümde yayınlanan makaleler, temel seviyede JavaScript bilgisine sahip olduğunuz varsayılarak hazırlanmıştır.

TypeScript Nedir?

Formal bir ifade ile TypeScript, Microsoft tarafından 2012 yılından bu yana geliştirilen ücretsiz ve açık kaynak kodlu, JavaScript’in tip güvenlikli bir sözdizimsel üst kümesidir. Normalde JavaScript tarafından desteklenmeyen fonksiyonların kullanımına izin vermesiyle birlikte, yazılan kodların bir derleyici vasıtasıyla tarayıcı ve benzeri ortamlarda çalışabilmesine imkân sağlar.

Şimdi de formal ifadeleri bir kenara bırakarak daha anlaşılır şekilde konuşalım. TypeScript’i, yazılan bir fonksiyonun sayısal tipte veri kabul eden parametresine metinsel ifade geçmeye çalıştığımızda, ya da pek çok farklı yerde kullanılan bir nesnenin içinden bir değişkenin adını değiştirdiğimizde, “Dur bakalım, bu yaptığın işlem 127.541 yerde hataya sebep oluyor, yerleri de bunlar, kolay gelsin” şeklinde bizi uyaran, normalde JavaScript’de uygulamayı kullanana kadar haberimizin olmayacağı hataları derleme sırasında önümüze çıkararak zaman ve prestij kaybından bizi kurtaran bir yardımcı olarak kabul edebiliriz.

Normalde “.js” uzantısı ile oluşturduğumuz JavaScript dosyaları yerine “.ts” uzantısını kullanan ve derleme sonucunda yazdığımız “.ts” uzantılı dosyaları kontrolden geçirdikten sonra aynı işi yapan “.js” uzantılı dosyalara çeviren bir ara dilden bahsediyoruz. Bu dil JavaScript’de olan tüm ifadeleri içerir ve üzerine, normalde JavaScript’de olmayan, başta tipler, Interface’ler ve generic tipler gibi benzeri diğer ifadeleri de kullanmamıza imkân sağlar.

Böylece proje dosyamızda “.ts” uzantılı dosyalarda fonksiyonlarımızın parametrelerine tipler verebilir ve normalde JavaScript’te koyamadığımız kısıtlamalar ile derleme aşamasında bu kısıtlamalara uymayan kodları tespit edebiliriz. Her şey bittikten sonra derleme sonrasında oluşan (ve elbette JavaScript’in desteklemediği bu tiplerden temizlenmiş halde olan) “.js” uzantılı dosyaları sunucumuza yükleyerek çalıştırırız.

Buradan da anlayacağınız üzere, tüm bu TypeScript meseleleri ve kısıtlamalar aslında geliştirme yaptığımız bilgisayarda yaşanır. Derleme sonrasında oluşan ve sunucuya yüklenecek olan “.js” uzantılı dosyalar yine klasik JavaScript dosyalarından ibarettir.

Neden TypeScript Kullanmalıyım?

İtiraf etmem gerekiyor ki, bu soruya cevap vermek benim gibi JavaScript sevdalısı birisi için hiç kolay değil. TypeScript ile gelen kısıtlamalar ve kurallar, bir anlamda biz JavaScript geliştiricilerin hoşuna giden esneklik ve özgürlüğün de bir anlamda elimizden alınması, daha az kod yazarak yapacağımız işleri daha fazla kod ve hammaliye ile elde etmemiz anlamına geliyor. Bu sebeple, tüm yazılım altyapısını JavaScript üzerine kurduğumuz kendi yazılım ekibimde de gerek front-end, gerekse de back-end tarafında pure JavaScript ile kodlama yaptırmaya uzun süre devam ettim.

Ancak her şey gibi özgürlüğün de bir bedeli var. Yazılım ekibi büyüdükçe, geliştirilen uygulamaların kapsamı genişledikçe, yapılan değişikliklerin etki analizini çıkartmak da zorlaşıyor. Bir fonksiyonun parametrelerinde değişiklik yapmak, bir Dto’nun yapısında değişikliğe gitmek, her ne kadar loose coupling bir mimari de tasarlasanız ya da SOLID prensiplerine de uysanız, bir Compiler veya Transpiler desteği olmaksızın bunları kullanan binlerce farklı noktada nelere sebep oluyor sorusunun cevabını vermek çok yüksek maliyetli oluyor. Zaman baskısının yaşandığı projelerde bazen de mümkün olmuyor.

Bu sebeple, eğer ki birkaç kişiden daha geniş bir yazılım ekibiniz varsa, projeniz basit bir araç/gereç uygulamasından daha genişse veya genişleme ihtimali varsa, tersini tecrübe etmiş ve sonuçları ile yüzleşmiş bir kişi olarak, hem uzun vadede geliştirme ve bakım maliyetlerinin kontrol altında tutulabilmesi, hem de yaşanacak öngörülemeyen sıkıntılar ile prestij kaybı yaşanmaması için TypeScript kullanılmasını tavsiye ediyorum.

JavaScript sevdalıları için; merak etmeyin, yazdığımız kod yine JavaScript, farklı bir dil değil. C# veya Java’daki kadar katı kurallar ve bize angarya gibi gelen geliştirme süreçleri ile karşı karşıya değiliz. Üstelik bu kurallar, biz ne kadar istersek o kadar katılaşıyor. Direksiyon halen bizim elimizde.

Kurulum

Öncelikle TypeScript’i kullanabilmek için geliştirme yaptığımız sistemde Node.js’in güncel bir versiyonunun kurulu olması gerekli. Eğer kurulu değilse, resmi sitesinden güncel versiyonu indirip kurmalıyız.

Ardından TypeScript derleme işlemlerinde kullanılan npm paketini, aşağıdaki komutu Windows komut satırına veya Linux/Mac OS terminaline yazarak sisteme global olarak yüklemeliyiz (Unix temelli sistemlerde aşağıdaki komutu çalıştırmak için başına sudo yazmak gerekebilir).

npm install -g typescript

Her şeyin düzgün şekilde kurulduğunu teyit etmek için aşağıdaki komutu çalıştırabiliriz.

tsc -v

Bu komut sonucunda kurulu olan versiyonun bilgisi komut satırında gözükmesi gerekir (Ben bu makaleyi yazarken güncel versiyon 5.0.3 şeklindeydi).

İlk Örneğimizi Yazalım, Derleyelim ve Çalıştıralım

Kurulumu tamamladığımıza göre artık ilk örneğimizi yazıp test edebiliriz. Bunun için bilgisayarımızdaki uygun bir yerde aşağıdaki içerikle “test1.ts” isimli bir dosya oluşturalım.

let value1:number;

value1 = 5;

console.log(value1);

İlk TypeScript dosyamıza baktığımızda, “value1” isimli değişkenin tipini gösteren “:number” ifadesi haricinde standart bir JavaScript dosyasından farkı olmadığını görürüz.

Aynı dosyasının yanına, aşağıdaki içerikle “index.html” isimli bir dosya oluşturalım.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="test1.ts"></script>
</head>
<body>

</body>
</html>

Burayı kadar yazdığımız kodu test etmek için, kullandığımız IDE vasıtasıyla index.html dosyasını görüntüleyelim ve tarayıcıdaki Developer Tools üzerinden Console sekmesine bakalım. Aşağıdaki gibi bir görüntü ile karşılaşıyor olmanız gerekli.

Yazdığımız kod her ne kadar JavaScript’e benzese de, “.ts” uzantılı bir dosyayı tarayıcımız açamadı. Eh, buraya kadar her şey normal. Sonuçta tarayıcıda “.ts” uzantılı dosyalar için tanımlı bir MIME Type yok.

O halde “test1.ts” isimli dosyamızın uzantısını, içeriğini değiştirmeksizin elle “test1.js” olarak değiştirelim ve “index.html” dosyamızın 5. satırında bulunan script src ifadesini de yine “test1.js” olarak değiştirip sayfayı tekrar açarak, Developer Tools üzerinden Console sekmesine bakalım. Aşağıdaki gibi bir görüntü ile karşılaşıyor olmanız gerekli.

MIME Type’da hata yok ancak bu sefer de “:” ifadesi yüzünden hata verdi. Buradan anlıyoruz ki tarayıcılar, en basit TypeScript ifadelerini bile görüntüleyemiyorlar. Demek ki yazdığımız kodu tarayıcıda çalıştırmak için bir derleme safhasına ihtiyacımız var.

Derleme işlemi öncesinde “test1.js” dosyasının ismini tekrar “test1.ts” haline geri çevirelim. Ardından Windows komut satırında veya Linux/Mac OS terminalinde bu dosyanın bulunduğu klasöre kadar giderek aşağıdaki komutu çalıştıralım.

tsc test1.ts

Bu komut, yazdığımız “test1.ts” isimli dosyayı derleyerek “test1.js” isimli bir dosya oluşturacaktır. Yeni oluşan “test1.js” isimli dosyayı incelerseniz, aşağıdaki gibi bir içeriğe sahip olduğunu göreceksiniz.

var value1;
value1 = 5;
console.log(value1);

Biraz önce “index.html” dosyamızın 5. satırında bulunan script src ifadesini “test1.js” şeklinde bırakmıştık. Sayfayı tekrar açarak, Developer Tools üzerinden Console sekmesine bakalım. Aşağıdaki gibi bir görüntü ile karşılaşıyor olmanız gerekli.

Güzel, kodumuz çalıştı. İyi de, biz burada ne yaşadık? Bu kodu biz de yazardık. Niye üzerimize böyle bir hammaliye aldık? İnsan kendine kendine bunu yapar mı?..

Demeden önce “test1.ts” dosyamızın içeriğini aşağıdaki şekilde değiştirelim.

let value1:number;

value1 = "Her şey çok güzel olacak";

console.log(value1);

Hemen ardından Windows komut satırında veya Linux/Mac OS terminalinde aşağıdaki komut ile tekrar derleme işlemini gerçekleştirelim.

tsc test1.ts

Bu durumda aşağıdaki gibi bir hata almış olmamız lazım.

Derleme sırasında oluşan hata bize diyor ki; 3. satırdaki “value1” değişkenine metinsel bir ifade atanmaya çalışılmış ancak bu aslında sayısal tipte bir değişkenmiş. Bu atama yapılamazmış.

Yani kodlama sırasında yapılan kural dışı bir durumu, henüz sayfayı çalıştırmadan derleme aşamasında bize göstererek, test mühendisi veya daha da kötüsü müşteri önüne düşmeden önce farkına varmamıza ve düzeltme şansımızın olmasına imkân sağladı.

Yukarıdaki paragrafı özellikle kalın yazdım çünkü bu paragraf, TypeScript’te bundan sonra yazacağım onlarca makalelerin tamamının özetini içeriyor.

Peki Nasıl Debug Ederim?

JavaScript’in normalde desteklemediği kısıtlamaları farklı bir ara dil kullanarak gerçekleştirmek, sunucu kurulumu öncesi de derleyerek aynı işi tarayıcıda yapan “.js” dosyalarını oluşturmak fena fikir değil ancak yazdığımız kod ve tarayıcıda çalışan kod farklı iken, tarayıcıda çalışan uygulamayı kendi kaynak kodumuz üzerinden nasıl debug edebiliriz ki? Yukarıda yazdığımız kod çok basit olduğu için “.ts” dosya içeriği ile “.js” dosya içeriği birbirine çok benziyordu. Ancak kompleks senaryolarda yazdığımız kod ile tarayıcıda çalışan kod birinden oldukça farklı olacak. Olmazsa olmaz debug işini nasıl çözeceğiz?

Bu sorunun cevabı, “source map” diye tabir edilen ve “.js.map” uzantısına sahip olan, TypeScript kodu ile JavaScript kodunu birbirine eşleştiren dosyalardan geçiyor.

Debug işine girişmeden önce, projemizin TypeScript ile ilgili konfigürasyonlarını içeren “tsconfig.json” isimli bir dosyayı, projenin ana dizininde oluşturmamız gerekiyor. Bu dosyayı elle de oluşturabileceğimiz gibi, daha aklı selim bir yöntem olarak “tsc” komutunun dosyayı bizim için oluşturmasını da sağlayabiliriz. Bunun için Windows komut satırında veya Linux/Mac OS terminalinde aşağıdaki komutu çalıştıralım.

tsc --init

Komutu çalıştırmanın ardından proje ana dizininde “tsconfig.json” isimli bir dosyanın oluşturulduğunu, dosyanın içerisinde de büyük çoğunluğu yorum satırına alınmış konfigürasyon seçenekleri olduğunu göreceksiniz. Şimdilik konfigürasyon ayarlarına girerek kafa karıştırmadan, sadece debug işleminde gerekli source map dosyalarının oluşabilmesi için dosya içeriğini silerek aşağıdaki şekilde değiştirelim.

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "sourceMap": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true
  }
}

Projeyi tekrar derleyeceğiz ancak en son kodumuzda tip uyumsuzluğu hatası vardı. Bunu düzeltmek için “test1.ts” isimli dosyamızdaki kodumuzu ilk haline geri çevirelim.

let value1:number;

value1 = 5;

console.log(value1);

Ardından projeyi derlemek için Windows komut satırında veya Linux/Mac OS terminalinde aşağıdaki komutu çalıştıralım.

tsc

Dikkat ederseniz, bu kez dosya ismini vermek zorunda kalmadık. “tsconfig.json” isimli dosyamızın içinde bulunduğu klasör ve bu klasörün altındaki tüm alt klasörlerde bulunan “.ts” uzantılı dosyaları bularak derlenmesi sağlandı. Ancak bu kez çıktıda bir fark var. Aynı klasörde “test1.js.map” isimli bir dosyanın oluştuğunu fark edeceksiniz. İçeriğine baktığımızda;

{"version":3,"file":"test1.js","sourceRoot":"","sources":["test1.ts"],"names":[],"mappings":";AAAA,IAAI,MAAa,CAAC;AAElB,MAAM,GAAG,CAAC,CAAC;AAEX,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC"}

Bakarak anlaşılması çok da mümkün olmayan bir ifade ile karşılaşırız. Bu dosya, “test1.ts” dosyasındaki asıl kaynak kodumuz ile derleme sonrası oluşan “test1.js” isimli son çıktı kodumuzun eşleştirilmesinde kullanılarak, tarayıcıda çıktıyı görürken bir yandan da asıl kaynak kodumuzda Debug işleminin yapılabilmesine imkân sağlar.

Not: JavaScript IDE olarak şahsen WebStorm’u Visual Studio Code’dan çok daha başarılı buluyorum ve kendi işimde de WebStorm kullanıyorum. Ancak WebStorm yıllık küçük bir abonelik ödemesi olan ücretli bir ürün. Bu ücret bir yazılımcı için oldukça kabul edilebilir seviyelerde olmasının yanında, henüz öğrenci seviyesinde olan veya bu işe hobi olarak devam eden kişilerin de olabileceğini göz önünde bulundurarak, blogda yaptığım tüm anlatımlarda Visual Studio Code kullanacağım.

Şimdi sıra geldi Debug için son adım olan Visual Studio Code ayarlarına. Proje ana klasöründeki “.vscode” isimli klasör içerisine aşağıdaki içerikle “launch.json” isimli bir dosya oluşturalım.

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against index.html",
        "file": "${workspaceFolder}/index.html",
        "sourceMaps": true,
        "trace": "verbose",
        "webRoot": "${workspaceFolder}"
      }
    ]
  }
  

Son aşamada “test1.ts” dosyamızın 5. satırına debug işareti koyarak Visual Studio Code Run and Debug altından projeyi çalıştıralım. Uygulama tarayıcıda çalışırken bir yandan da 5. satırdaki Debug ifademizin aktif olduğunu, fare imleci ile 3. satırda bulunan “value1” isimli değişkenin üzerine geldiğimizde değerini okuyabildiğimizi göreceksiniz.

Source Map dosyası sayesinde bir yandan “test1.js” dosyası tarayıcıda çalışırken, bir yandan da IDE üzerinden “test1.ts” kaynak kodumuzu debug edebiliriz.

Böylece TypeScript ile tanışmış ve en temel fonksiyon seviyesinde kullanarak test etmiş olduk. TypeScript bölümündeki takip eden her bir makale ile konuları derinlemesine irdeleyerek dil üzerindeki hakimiyetimizi arttırmaya çalışacağız.

Herkese iyi çalışmalar…