TypeScript, geçen sene Microsoft’un çıkardığı yeni bir dil. Aslında tam olarak sadece yeni bir dil demek çok doğru olmaz. Javascript’in bir üst kümesi olarak ortaya çıkan, syntax olarak Javascript’e benzeyen, farklı bir grammer’i olan bir dil diye biraz daha anlamlı hale getirebiliriz.

Javascript, bildiğiniz üzere strongly-typed bir değil. Dolayısıyla oldukça esnek ve genişletilebilir. Oldukça güzel bir özellik belki ama geliştirmeyi zorlaştıran da bir özellik diyebilirim. C#, Java gibi strongly-typed diller ile geliştirme yapan kişiler özellikle oldukça zorlanır. TypeScript’in en büyük özelliği ve artısı belki bu noktada ortaya çıkıyor. TypeScript dilinin compile zamanında strong-type özelliği olması ama runtime’da klasik bir Javascript gibi çalışıyor olması, javascript geliştirenler için oldukça büyük bir kolaylık sağlıyor.

Bu son cümlede aslında yanlış bir ifade kullandım. Dikkat çekmek adına bile bile yaptığımı belirtmek isterim. “Javascript gibi çalışıyor” ifadesinde ki “gibi” aslında fazla oldu. TypeScript ile yapmış olduğunuz geliştirme derlendikten sonra Javascript’e dönüşüyor. Yani aslında çalışan şey direk Javascript. Javascript ile oldukça karmaşık ve zor bir şekilde yapabileceğin şeyleri, TypeScript kolayca yapmanızı sağlıyor diyebilirim.

Peki neden TypeScript? Neden şimdi?

TypeScript diline benzer, aynı yaklaşımla ortaya çıkmış CoffeeScript,Dart gibi başka diller de var aslında. Hatta bunlar TypeScript’den de önce var olan diller. Typescript’in bu açıdan farkı, .NET Framework’ündeki yaklaşım ve temel OOP prensiplerine dayalı geliştiriliyor olması. Bu açıdan server üzerinde uygulama geliştiren kişilerin, benzer yaklaşımla Javascript yazabiliyor olması TypeScript ile oldukça kolay. Özellikle Visual Studio gibi bir IDE’de yazabiliyor olmak oldukça kolaylık sağlıyor.

Neden şimdi sorusuna da; gelişen web teknolojilerinin ortaya çıkardığı ihtiyaçları, daha kaliteli ve hızlı bir şekilde karşılayabilmek adına, geliştirmenin kolay olması gerektiğinden diyerek kendi adıma cevap verebilirim.

TypesSript, inheritance, interfaces,encapsulation gibi OOP prensiplerine de destek vermekte. Dolayısıyla Javascript tarafında sadece fonksiyon olan kavramları biraz daha somut hale getirmek, hali hazırda OOP prensiplerine aşina olan kişilere oldukça kolay gelecektir.

TypeScript’e başlamak için http://www.typescriptlang.org/ adresine gitmeniz yeterli olacaktır. Visual Studio için ilgili eklentiyi yükledikten sonra, Visual Studio üzerinden, yeni gelen proje şablonları ile hemen geliştirmeye başlayabilirsiniz. Yok ben Visual Studio kullanmak istemiyorum derseniz de, Node.js üzerinden de TypeScript’i compile edebileceğiniz modül mevcut.

Daha v1.0 versiyonu ne yazık ki yayınlanmadı. 0.9.1.1 versiyonu ile ama sona çok yaklaşıldığını söyleyebilirim. Kendi projelerimde yavaştan hatta kullanmaya başladım. İlerleyen günlerde biraz daha ayrıntılı olarak TypeScript’e değiniyor olacağım. Şu an böyle giriş niteliğinde bir yazı olsun istedim. O yüzden fazla uzatmıyorum. Daha uzun ve ayrıntılı olarak aşağıda Anders Hejlsberg’ın Channel 9’da ki TypeScript videosu ve altında kendi yazdığım basit bir örnek ile bitiriyorum.

TypeScript ile yazmış olduğumuz kod örneği;

class CustomHTMLControl
{
    //sınıfımdaki değişkenler
    //3 tane HTMLElement tipinde
    //1 tane private HTMLInputElement tipinde
    //1 tane private number tipinde
    container: HTMLElement;
    header: HTMLElement;
    content: HTMLElement;
    private button: HTMLInputElement;
    private  dummy: number=0;

    //sınıfımın constructor'ı
    //bunun içinde OOP yaklaşımı doğrultusunda
    //nesnemi oluşturmak için gerekli tanımlamaları yapıyoruz
    constructor(element: HTMLElement)
    {
        this.container = element;
        this.header = document.createElement('div');
        this.header.innerText = 'This is CustomHTMLControl';
        this.container.appendChild(this.header);

        //Bir tane de metodumuz olsun
        this.initContent();
    }

    //private olan bu metodu sadece bu sınıf içerisinde
    //kullanabiliyoruz.
    private initContent()
    {
        this.content = document.createElement("div");
        this.button = document.createElement("input");
        this.button.type = "button";
        this.button.value = "Hello World";

        this.button.onclick = this.onClick;

        this.content.appendChild(this.button);
        this.container.appendChild(this.content);
    }
    //Button'a tıklandığında ki metodumuz
    public onClick() {

        alert('You just clicked the button');
    }

    //public bir metodumuz olsun.
    //Nesnemiz üzerinden bu metoda ulaşabiliyor olacağız.
    GetClickCount()
    {
        return this.dummy;
    }

}

window.onload = () => {
    var parent = document.getElementById('content');
    var customControl = new CustomHTMLControl(parent);

};

Derlendiği zaman ortaya çıkan Javascript kodu

var CustomHTMLControl = (function () {
    //sınıfımın constructor'ı
    //bunun içinde OOP yaklaşımı doğrultusunda
    //nesnemi oluşturmak için gerekli tanımlamaları yapıyoruz
    function CustomHTMLControl(element) {
        this.dummy = 0;
        this.container = element;
        this.header = document.createElement('div');
        this.header.innerText = 'This is CustomHTMLControl';
        this.container.appendChild(this.header);

        //Bir tane de metodumuz olsun
        this.initContent();
    }
    //private olan bu metodu sadece bu sınıf içerisinde
    //kullanabiliyoruz.
    CustomHTMLControl.prototype.initContent = function () {
        this.content = document.createElement("div");
        this.button = document.createElement("input");
        this.button.type = "button";
        this.button.value = "Hello World";

        this.button.onclick = this.onClick;

        this.content.appendChild(this.button);
        this.container.appendChild(this.content);
    };

    //Button'a tıklandığında ki metodumuz
    CustomHTMLControl.prototype.onClick = function () {
        alert('You just clicked the button');
    };

    //public bir metodumuz olsun.
    //Nesnemiz üzerinden bu metoda ulaşabiliyor olacağız.
    CustomHTMLControl.prototype.GetClickCount = function () {
        return this.dummy;
    };
    return CustomHTMLControl;
})();

window.onload = function () {
    var parent = document.getElementById('content');
    var customControl = new CustomHTMLControl(parent);
};
//# sourceMappingURL=app.js.map