Typescript ve jQuery javascript kütüphanesini birlikte nasıl kullanabiliriz?
Typescript, microsoft tarafından geliştirilmiş olan, açık kaynak kodlu bir programlama dilidir. Javascriptin bir üst kümesidir. Peki Typescript diye bir dile neden gereksinim duyulmuştur?
Şöyle söyleyelim, Typescript bize javascriptin mevcut haliyle desteklemediği sınıf bazlı nesne yönelimli, es2015 standardında kod yazma imkanları sunmaktadır. Bunun dışında statik tip kontrolü yaparak, bizi olması muhtemel pek çok bug’dan kurtarmaktadır. Düz javascript yazarken bildiğiniz gibi, bir değişkene istediğiniz tipten veriyi set edebiliyoruz. Örneğin değişkene numerik bir değer verdiğimiz satırdan bir kaç satır sonra, aynı değişkene string değerini set edebiliyoruz. Typescript compileri (tsc.exe) kodumuzu düz javascript koduna çevirirken, bu tutarsızlıkları kontrol ederek bize uyarı vermektedir.
Node.js ile Ortamımızı Oluşturuyoruz
Bir klasör oluşturalım.
mkdir typejquery cd typejquery npm init
Ortamımızda node.js kurulu olması gerekiyor, çünkü nodejs ile birlikte gelen npm aracını kullanacağız.
Öncelikle typescript ve typings paketlerini global olarak kuralım.
npm install -g typescript
npm install -g typings
jquery type dosyalarını yükleyelim
typings install dt~jquery --global --save
jquery’nin kendisini yükleyelim.
npm install jquery --save
Normalde tsc.exe komutunu kullanırken, bazı parametreleri girmemiz gerekiyor. Fakat biz her seferinde aynı parametreleri girmek istemediğimiz için tsconfig.json dosyası oluşturup, parametrelerimizi orada belirteceğiz.
tsconfig.json dosyası:
{
"compilerOptions": {
"module": "commonjs"
},
"compileOnSave": true,
"files": [
"app.ts"
]
}
Kök dizinimize app.ts dosyasını ekleyelim: İlk satırda, referans belirttiğimiz için, Visual Studio Code’da kod tamamlama (intellisense) özellikleri de çalışacaktır.
/// <reference path="typings/globals/jquery/index.d.ts" />
$(() => {
$('h2').text('yeni baslik');
let mytext:string = 'baska deger';
let resulttext:string = $('h2').text();
resulttext = mytext + ' ' + resulttext;
console.log(resulttext);
});
Yine kök dizinine Index.html dosyasını ekleyelim; Bu dosyada, hem jquery hem de app.js dosyalarını script src olarak eklememiz gerekiyor:
<html>
<head>
<title>my title</title>
</head>
<body>
<h2>baslik</h2>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script src="app.js"></script>
</body>
</html>
Görüldüğü gibi Typescript sayesinde app.ts’de es2015 standardıyla gelmiş olan lambda özelliğini ve let değişken tanımlama yapısını kullanabildik. Bu basit temel üzerinde denemeler yapabilirsiniz. Örneğin jquery text() metoduna iki parametre girecek olursanız, Typescript derleyicisi bize uyarı verecektir. Düz javascript kodu yazdığımızda ise herhangi bir uyarı vermeyeceği için, hatayı ancak çalışma zamanında ortaya çıkınca görebileceğiz. Bu açıdan bakıldığında, Typescript, kodlarımızı daha sağlam ve bakımı kolay bir noktaya taşıyacaktır.