TypeScript 101

Merhaba Arkadaşlar,

TypeScript

Angular’ dan bahsedip de Typescript’ den bahsetmemek olmazdı. Bu makalede de sizinle anguların da syntax’ ı olan Typescripte şöyle bir göz atacağız.

Typescript nedir?

Microsoft tarafından geliştirilen son stable sürümünün ( 3.2 / 28 Ocak 2019 itibariyle) olan, javascript framework’ü dür.

Uygulamamızı Typescript ile geliştirdikten sonra tsc yani Typescript Compiler yardımı ile tamamı ile Javascript koduna dönüştürüp projemize dahil edebiliyoruz. Bazı istisnai durumlar hariç.

TypeScript Kurulumu

Terminalden (npm install -g typescript) komutunu vererek kurabilirsiniz.

 npm install -g typescript 

Değişken ve Method() Tanımlamak:

function selamla(kisi: string) {
    return "Merhaba, " + kisi;
}

let kisi = "ibrahim";

document.body.innerHTML = selamla(kisi);

Burada ne yaptık gelin birlikte inceleyelim; selamla adında bir method() tanımladık, bu methodumuz birde parametre alıyor.

let keyword’ ü ile de bir kisi değişkeni tanımladık . Son olarak da methodumuza kisi değişkenimizi gönderiyoruz.

Şimdi gelelim bu kodları compile etmeye. Dosya uzantılarımızı *.ts (typescript) uzantılı olarak kaydediyoruz. Ardından terminal ekranında tcs dosyaadi.ts diyerek compile ediyoruz ve dosyaadi.js olarak derleniyor kodlarımız. Eğer derlenme işlemini bu şekilde devamlı yapmak istemiyor isek ki mantıklı olan da bu olacaktır. kodların bulunduğu dizinde terminalden tsc –watch komutunu vererek tüm *.ts dosyalarının dinlenmesini ve dosyalarda her değişiklik yapıldıkça otomatik olarak compile edilmesini sağlıyoruz.

Değişkenleri 3 şekilde tanımlayabiliyoruz. keywordlerimiz let, var ve const

Bu tanımlamaları (keywordleri) bir fonksiyon ile birlikte for bloğu içerisinde ele almaya çalışalım böylelikle daha iyi anlayabiliriz.

let Kullanımı:

}

function deneme () {
     for (let i =0; i<10; i++){
         console.log(i)
     }
     console.log("Son i değeri" + i)
}
deneme();

Son i değişkeni altındaki hata bildiren kırmızı çizgiyi gördünüz. Direk hata alıyoruz. Kodu derlemeye çalıştığımızda ise let anahtar kelimesi en yakın bloğu kendisine kapsam olarak belirlediğinden Typescript derleyicisi bize böyle bir değişken bulunamadığına dair bir hata verecek. Yani Son i değerini bize vermeyecek.

var Kullanamı:

function deneme () {
     for (var i =0; i<10; i++){
         console.log(i)
     }
     console.log("Son i değeri" + i)
}
deneme();

Şimdi gördüğünüz üzere döngümüz i < 10 eşitliği bozulduğu gibi durdurulmuş. Ama işlem sırası olarak i = 10 denilip sonrasında eşitlik kontrol edildiği için i değişkeni 10 olarak kalmış ve döngü içinde tanımlanan bir i değişkeni döngü dışında da kullanılabilmesine izin verilmiş.

var anahtar kelimesi kendisine kapsam olarak en yakın fonksiyonu alır. Yani biz değişkeni döngü içinde atamış da olsak deneme() fonksiyonunun içinde istediğimiz yerde kullanabiliriz. Yani Son i değirini bize verecek

TypeScript

Değişken Tipleri :

Değişken TipiKullanımıAçıklama
NumbernumberÇift duyarlıklı 64 bit kayan nokta değerleri. 
Hem tamsayıları hem de kesirleri temsil etmek için kullanılabilir.
StringstringUnicode karakter dizisini temsil
BooleanbooleanMantıksal değerleri gösterir, doğru ve yanlış
Voidvoidİşlev dönüş türlerinde kullanılır. Fonksiyonlarda geri dönüş değeri olmadığını belirtir.
NullnullBir nesne değerinin yokluğunu temsil eder.
UndefinedundefinedBaşlatılmamış tüm değişkenlere verilen değeri belirtir
ArrayarrayDizi tipin de değişken olduğunu gösterir.
Tupletuple: [string, number] Eğer tek sefer kullanılması öngörülüyor ve 1-2 özellik den oluşacaksa Tuple gibi yapıları kullanabiliriz. 
AnyanyTüm veri tiplerinden değer atanabilir.

Typescript Değişken Kapsamı (Scope) :

  • Global Kapsam – Global değişkenler programlama yapıları dışında bildirilir. Bu değişkenlere, kodunuzun içindeki herhangi bir yerden erişilebilir.
  • Sınıf Kapsamı – Bu değişkenlere alan adı da denir . Alanlar veya sınıf değişkenleri sınıf içinde ancak yöntemlerin dışında bildirilir. Bu değişkenlere sınıfın nesnesi kullanılarak erişilebilir. Alanlar da statik olabilir. Sınıf adı kullanılarak statik alanlara erişilebilir.
  • Yerel Kapsam – Yerel değişkenler, adından da anlaşılacağı gibi, yöntemler, döngüler vb. Yapılarda bildirilir. Yerel değişkenlere yalnızca bildirildiği yapı içinde erişilebilir.

Any Veri Tipi:

let deger : any;

Değişkenimizin tipi any yani bütün veri tiplerinden değerler alabilir. Yani aynı Javascript’teki gibi hata almadan atamalar yapabiliriz.

Arrow (Generic) Tip Fonksiyonlar:

Bu işlemi fonksiyon üzerinde inceleyelim. Öncelikle standart bir fonksiyon tanımlayıp sonrasında onu evrimleştirelim. Evrilme işleminin C# da kullandığımız Lambda ifadelerinden bir farkının olmadığını hatta bire bir aynısı olduğunu göreceksiniz.

let log = function(steem) {
    console.log(steem)
}

Şimdi bu fonksiyonu Generic tip fonksiyona çevirelim.

//yukarıdaki fonksiyonu 3 farklı şekilde generic hale getirebiliriz. 
//1. hali
let log = (steem) => {
    console.log(steem)
}
//2. hali
let log = (steem) => console.log(steem)

//3.hali
let log = steem => console.log(steem)

Interface:

Interface sınıfında sadece method tanımları bulunur. Yani Interface içersinde kod yazılmaz. İçerisinde tanımlanan method tanımları yazmış olduğumuz bu interface’i implemente edecek diğer sınıflar tarafından implement edilmek zorundadırlar.

Tanımladığımız Interface’ler başka bir interface den inherit edilebilir. Interface’ler genelde can-do ilişkisi vardır.

Interface Özellikleri :

  • Kod içerisinde “new” anahtar sözcüğü kullanılarak oluşturulamazlar.
  • Bir sınıf içersinde birden fazla interface implemente edebilir.
  • Implemente edicek sınıflar arasında genelde “can-do” ilişkisi vardır.
  • Interface içerisine sadece boş method’lar tanımlanabilir.

Bir de örnek üzerinde görelim:

interface IPerson { 
   firstName:string, 
   lastName:string, 
   sayHi: ()=>string 
} 

var customer:IPerson = { 
   firstName:"Tom",
   lastName:"Hanks", 
   sayHi: ():string =>{return "Hi there"} 
} 

console.log("Customer Object ") 
console.log(customer.firstName) 
console.log(customer.lastName) 
console.log(customer.sayHi())  

var employee:IPerson = { 
   firstName:"Jim",
   lastName:"Blakes", 
   sayHi: ():string =>{return "Hello!!!"} 
} 
  
console.log("Employee  Object ") 
console.log(employee.firstName) console.log(employee.lastName)

Fonksiyonlara Tip Belirleme:

Bir örnek üzerinden gidelim.

function Kullanici(): string{
     //Kod bloğu
       return;
}
//////
function TcknNo(): number{
     //Kod bloğu
       return;
}
/////
function Islemler(isim:string, soyisim:string, aciklama:string ):string{
     //Kod bloğu
       return isim, soyisim, aciklama ;
}

Sınıflar ve Constructor Mantığı: 

TypeScript’te bir sınıf bildirmek için class anahtar sözcüğünü kullanılır.

Sınıf anahtar kelimesini sınıf adı takip eder. Bir sınıf adlandırırken tanımlayıcılar için kurallar dikkate alınmalıdır.

Bir sınıf tanımı şunları içerebilir –

  • Alanlar (Fields) – Alan, bir sınıfta bildirilen herhangi bir değişkendir. Alanlar, nesnelere ait verileri temsil eder.
  • Yapıcılar (Constructors) – Sınıftaki nesnelere bellek ayırmaktan sorumlu
  • İşlevler (Function) – İşlevler bir nesnenin gerçekleştirebileceği eylemleri temsil eder. Ayrıca zaman zaman yöntem olarak da adlandırılırlar.

Bir araya getirilen bu bileşenler, sınıfın veri üyeleri olarak adlandırılır. Aşağıdaki örnekte inceleyelim.

class Car { 
   //field 
   engine:string; 
 
   //constructor 
   constructor(engine:string) { 
      this.engine = engine 
   }  

   //function 
   disp():void { 
      console.log("Engine is  :   "+this.engine) 
   } 
}

Örnek bir Car sınıfını. Sınıfın engine adında bir alanı var. Bir alan bildirilirken var anahtar sözcüğü kullanılmaz. Yukarıdaki örnek, sınıf için bir yapıcı fonksiyon olduğunu görüyoruz.

Yapıcı, sınıfın değişkenlerini başlatmaktan sorumlu olan sınıfın özel bir işlevidir. TypeScript constructor anahtar sözcüğünü kullanarak bir constructor tanımlar. Yapıcı bir fonksiyondur ve bu nedenle parametrelendirilebilir.

this anahtar kelimesi sınıfının geçerli örneğine karşılık gelir. Burada, parametre adı ve sınıfın alanının adı aynıdır. Belirsizlikten kaçınmak için, sınıfın alanı this anahtar keywordü eklenmiştir .

disp () basit bir fonksiyon tanımıdır. fonktion anahtar sözcüğünün burada kullanılmadığını unutmayın.

class SinifIsmi {
    degiskenIsmi: degiskenTipi;
    .
    .
    .

    constructor(parametreIsmi: parametreTipi, ...) {
        // yapıcı fonksiyon içeriği
    }

    fonksiyonIsmi() {
        // fonksiyon içeriği
    }
}

Yani Yukarıdaki gibi bir işlem sıramız olacak tanımlama yaparken.

Class kullanımı Instance (Öreneklem) :

var object_name = new class_name([ arguments ])
  • New anahtar kelimesi örneklem (Instance) den sorumludur.
  • İfadenin sağ tarafı yapıcıyı çağırır. Yapısallaştırılmışsa yapıcı değerlerden geçirilmelidir.
var obj = new Car("Engine 1")

Özniteliklere ve İşlevlere Erişim:

//accessing an attribute  
obj.field_name  
//accessing a function  
obj.function_name()

Bir bütün olarak bakarsak eğer,

class Car { 
   //field 
   engine:string; 
   
   //constructor 
   constructor(engine:string) { 
      this.engine = engine 
   }  
   
   //function 
   disp():void { 
      console.log("Function displays Engine is  :   "+this.engine) 
   } 
} 

//create an object 
var obj = new Car("XXSY1")

//access the field 
console.log("Reading attribute value Engine as :  "+obj.engine)  

//access the function
obj.disp()

Erişim Belirteçleri:

3 tip erişim belirleyici var OOP’ den aşina olduğunuz gib;  publicprivate ve protected. Varsayılan olarak public atanır.

  • private erişim belirtecine sahip üyeler bulundukları sınıf dışarısında kullanılamazlar.
  • public erişim belirtecine sahip üyeler bulundukları sınıf dışarısından da erişilebilirler.
  • protected erişim belirtecine sahip üyeler bulundukları sınıfta ve o sınıftan türetilmiş sınıflarda kullanılabilirler.

Kalıtım (inherit) Miras Almak:

Nesne programlamanın olmazsa olmazı Inherit Kalıtım. Sınıflar arası kalıtım almak için keywordümüz extends

// ana sınıfımız
class Araba {
    // üye değişkenimiz (varsayılan olarak public)
    isim: string;

    // yapıcı fonksiyonumuz
    constructor(ismi: string) {
        this.isim = ismi;
    }

    hareketEt(metre: number = 0) {
        // metin ifadeleri içerisinde değişken kullanımı
        console.log(`${this.isim} ${metre} metre hareket etti.`);
    }
}

// Araba sınıfından türettiğimiz Ford sınıfımız
// bu sınıfımız Araba sınıfının tüm özelliklerini taşıyacak
class Ford extends Araba {
    constructor(isim: string) {
        // üst sınıfımızın yapıcı fonksiyonunu çağırıyoruz
        super(isim);
    }

    hareketEt(metre = 8) {
        console.log(`${this.isim} Gidiyorr...`);
        // üst sınıfımızdaki fonksiyonumuzu çağırıyoruz
        super.hareketEt(metre);
    }
}

// Araba sınıfından türettiğimiz Mercedes sınıfımız
// bu sınıfımız da Araba sınıfının tüm özelliklerini taşıyacak
class Mercedes extends Araba {
    constructor(isim: string) {
        // üst sınıfımızın yapıcı fonksiyonunu çağırıyoruz
        super(isim);
    }

    hareketEt(metre = 45) {
        console.log(`${this.isim} Gidiyor...`);
        // üst sınıfımızdaki fonksiyonumuzu çağırıyoruz
        super.hareketEt(metre);
    }
}

let bir = new Ford("bir");
let iki: Araba = new Mercedes("iki");

bir.hareketEt();
iki.hareketEt(16);

Çıktımız:

Bir Gidiyor...
Bir 8 metre hareket etti.
iki Gidiyor...
iki 16 metre hareket etti.

Constructer Tanımlama:

Class içersinde constructor(yapıcı) metodlar tanımlayabiliriz. Eğer extends komutunu kullanarak başka bir sınıftan miras alacak olursak super(); komutunu constructor’ımız içerisinde kullanarak miras alacağımız sınıf içerisindeki default contructor’ın çalıştırılmasını sağlayabiliriz. Default contructor haricinde sizin tanımlayacağınız constructor var ise bu parametreleri de bu constructor da tanımlamanız gerecek.

Bir Örnek de inceleyelim:

class Personel {
    public isim: string;
    private Aktifmi: boolean;
 
    constructor(isim: string, Aktifmi: boolean = true) {
        this.isim = isim;
        this.Aktifmi = Aktifmi;
    }
}
class Memur extends Personel {
    public Gorev: string;
    public Mesai: string;
    
    super(); //miras aldığımız sınıf içerisindeki default constructor'ın çalıştırılmasını sağlıyoruz
    constructor(Gorev?:string, Mesai:string){
    this.Gorev = Gorev;
    this.Mesai = Mesai;
   }
}

Makalemi okuduğunuz için teşekkür ediyorum. Başka bir makalede görüşmek üzere hoşçakalın.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir