Önceki yazılarımdan bir tanesinde TypeScript’den bahsetmeye çalışmıştım. Sonunda da oldukça basit bir kod örneği ile biraz dikkatleri çekmek istemiştim. Javascript oldukça esnek bir dil olduğundan, öğrenmesi daha doğrusu düşündüğünüz şeylerin implementation’ı biraz zor. TypeScript, OOP notasyonlarına daha uygun bir dil olduğu için, OOP ile uğraşanlara bu açıdan bazı şeyler daha kolay gelecektir. Ama bu noktada da Javascript’in ve TypeScript’in iyi anlaşılıyor olması gerekmekte. Bundan dolayı önceki örnek üzerinden giderek, çok basit bir şekilde bir örnek daha paylaşmak istiyorum. Bunun üstüne birşeyler koyarak TypeScript tarafında bazı şeyleri beraberce zamanla görmüş olabiliriz. İlerleyen günlerde OOP yaklaşımlarına ve C#’daki benzer şeylere göre örnekleri geliştiriyor olacağım. Sizinde sorularınız olursa, sormaktan çekinmeyin. Bu arada çok basit diyorum ama tabi ki temel Javascript bilgisi şart…

Bu örneğimizde daha önceki yazıdaki kod parçasını biraz dana anlamlı hale getiriyoruz. Basit bir alışveriş listesi yapıyor olacağız. Bir tane text alanından girdiğimiz şeyleri, listemize atıyor olacağız. Daha sonra listemizdeki bir elemana tıkladığımızda, onu listeden üstünü çizerek kaldırmış olacağız.

Bunun için önce alışveriş listemizdeki elemanları temsil edecek Note diye bir sınıf yapıyoruz.

//Alışveriş listemizdeki elemanları temsil edecek
//Note diye bir sınıfımız olsun.
class Note {

    //DOM'daki HTMLElement tipinde karşılığı
    private _container: HTMLElement;
    //Listedeki elemanımız içeriği
    private _text: string;

    constructor(t: string) {
        //Constructor'da text'imizi set ediyoruz.
        this._text = t;

        //DOM'da ki elemanı bir DIV olarak tanımlayıp
        //text'i bu div'in innertext değişkenine atıyoruz.
        this._container = document.createElement("div");
        this._container.innerText = this._text;

        //DIV'imize tıklandığı zaman listemizdeki elemanın
        //üstünü çizip,italik yapıyoruz
        this._container.onclick = () =>
        {
            this._container.style.textDecoration = 'line-through';
            this._container.style.fontStyle = 'italic';
        }
    }

    public GetText(): string {
        return this._text;
    }

    //Listemizdeki item'ı verilen HTML parent elemanına
    //ekleyip, render yapıyoruz diyebiliriz.
    public Render(parent:HTMLElement) {
        parent.appendChild(this._container);
    }

}

Alışveriş listemizi yaratacak olan sıfımızıda aşağıdaki gibi tanımlıyoruz.

class CustomHTMLControl {

    container: HTMLElement;
    header: HTMLElement;
    content: HTMLElement;
    footer: HTMLElement;
    inputField: HTMLInputElement;
    private button: HTMLInputElement;

    //Listemizde ki elemanları Note tipinde bir array'de tutuyoruz.
    private _notes: Note[] = [];
    private noteCount: number = 0;

    constructor(element: HTMLElement) {

        //DOM içerisindeki gerekli elemanları yaratıyoruz
        //Burada içeriği almak için bir tane input alanımız
        //bir tane button yeterli olacaktır.
        //Button'a tıkladığımızda, Note tipinde bir elemanı
        //listemize ekliyoruz.
        this.container = element;
        this.header = document.createElement('div');
        this.header.innerText = 'This is a Shopping List';
        this.container.appendChild(this.header);

        this.inputField = document.createElement("input");
        this.inputField.type = "text";

        this.container.appendChild(this.inputField);

        this.content = document.createElement("div");
        this.button = document.createElement("input");
        this.button.type = "button";
        this.button.value = "Add";

        //Burada bind(this) ifadesini kullanmazsak
        //onClick metodunda bu sınıf içerisinde ki local
        //değişkenlere ulaşamıyor oluruz. Bunun yerine
        //Fat Arrow fonksiyon deklarasyonunu da yapabiliriz.
        //TypeScript Fat Arrow deklarasyonunu da destekliyor.
        this.button.onclick = this.onClick.bind(this);

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

        this.footer = document.createElement("div");

        this.container.appendChild(this.footer);
    }

    public onClick(ev: MouseEvent) {
        //Listemizdeki eleman sayısını artırıyoruz.
        //Belki bu sayıyı göstermek isteriz.
        this.noteCount += 1;

        //Array'e ekliyoruz.
        this._notes.push(new Note(this.inputField.value));
        this.inputField.value = '';
        this.Render();

    }

    public Render(): void {
        //Array'mizden alıp; -ki burada aldığımız eleman Note tipinde olacaktır.
        var note = this._notes.pop();
        note.Render(this.content);
    }

}

window.onload = () => {
    //HTML sayfamızdaki herhangi bir div içeriğine ekliyoruz
    //oluşturduğumuz kontrolü
    var parent = document.getElementById('content');
    var customControl = new CustomHTMLControl(parent);
};