Angular Çalışma Notlarımdan - 1 (Type Script)

      S.a. Arkadaşlar,
      Son dönemlerde Angular'a olan ilgim nedeniyle daha düzenli ilerlemek açısından kursa başlamıştım. Kursu bitirip proje de yapmıştım, fakat üzerinden zaman geçince kursu tekrardan gözden geçirmek istedim. İkinci defa izlediğimde her şeyin daha iyi oturduğunu fark ettim. Daha iyi anladığımı düşündüğüm halde ileride kendime aldığım notları elden geçirip sizinle de paylaşmak istedim. Bu yazıyı hazırlarken Uygar Manduz'un verdiği eğitim sonrası yazının kapsamı genişledi. 3 yazılık bir seri olarak ele almaya karar verdim. 1. yazıda type scripti ele alacağız.
    Type Script; type-safe, nesne yönelimli, derlenebilir bir programlama dilidir. Aslında type script'te yazılan kod derlenir ve java scripte çevrilir, ama type script özellikle backend tabanlı yazılımcılar için çok pratik olmaktadır. Java, C# gibi nesne yönelimli programlama dillerine aşina olan programcılar type scripte daha hızlı adapte olabilmektedirler.

     Veri Tipleri: Type script'in type-safe olduğunu söylemiştik, bu da oluyor ki değişkenin değerini açıkça belirtmek lazım. Ayrıca tupple, union, any, never gibi yeni kavramlar da mevcut. Tupple bir dizi veya list içinde farklı değerlerin almasını sağlayan yapıdır. Union yapısı ise bir değişkenin birden çok tipi olabileceğini belirtiyoruz. any ile de değişkenin her şey olabileceğini belirtiyoruz. Ama bunu dikkatli kullanmakta fayda var, yoksa type script'in nimetlerini kaybedebiliriz.

let empId: number = 1;
let empName: string = "Malik Masis";   
let code: (string | number); // union yapısı - değişken birden fazla tip olabilir.
let employee: [number, string] = [1, "Malik"];//tupple yapısı, 1.tip number, 2.si string olmalı.
let something: any = "Merhaba Dünya";  // any - değişken her tip olabilir.
let nothing: void = undefined; // oop dillerden bildiğimiz void - undefined ve null değer alır.
never: null olmayacağından emin olduğumuz yerlerde kullanırız.

   
     Tip Tanımlama: Değişkenin tipini belirler. Bir çeşit cast işlemidir. C#'taki cast işlemine çok benzer. Hem direkt cast hem de as operatorü yardım ile yapabiliyoruz. Dikkat edilmesi konu ise xml ile çalışırken sadece as işlemine izin veriyor olmasıdır. Bunun sebebi de < > tanımlamalarının xml ile karışabiliyor olmasıdır.

let code: any = 123;
 
let employeeCode = <number> code; 
console.log(typeof(employeeCode)); //Çıktı: number

let employeeCodeAs = code as number;
console.log(typeof(employeeCodeAs)); //Çıktı: number

     Fonksyionlar: Type script'in güvenli yapısı fonksiyonlara da sirayet etmiş durumdadır. Metodun dönüş tipi, aldığı parametre tipi, dönen sonuç gibi yapılar da type-safe'dir.

function Sum(x: number, y: number) : number {
    return x + y;
}

Sum(2,3);

   
     Optional and Default Parameters: Optional değerler null olabilen değerlerdir. Fonksiyonu çağırırken o parametreyi geçme zorunluluğumuz yoktur. Default değerler ise parametreye ilk değer atanan değerlerdir. Eğer fonksiyona her hangi bir değer girilmezse default değeri atanır, parametre geçilirse yeni atanan değer default olan değeri ezer.

//optional örneği
function Greet(greeting: string, name?: string ) : string {
    return greeting + ' ' + name + '!';
}

Greet('Merhaba','Malik');//Çıktı: "Merhaba Malik!"
Greet('Selam'); // Çıktı "Selam undefined!".

default örneği
function Greet(name: string, greeting: string = "Merhaba") : string {
    return greeting + ' ' + name + '!';
}

Greet('Malik');//Çıktı: "Merhaba Malik!"
Greet('Malik', 'Selam'); // Çıktı: "Selam Malik!".

   
     Rest Parameters: Rest parametre ise aynı tipten birden fazla şekilde değer girmenizi sağlar. Örneğin bir toplama işlemi yapıyorsunuz, 2 sayıyı da toplayabilirsiniz, 3 sayıyı da toplayabilirsiniz. Her biri için overload fonksiyonlar kullanmanıza gerek kalmadan bu yapı rahatlıkla kullanabilirsiniz. Burada dikkat etmeniz gereken bir şey ise bir fonksiyonda bir adet rest parametre olabilir ve o da en sonda olmalıdır. C#'ta params , java'da ise vararg yapıları bunun karşılığıdır diye hatırlıyorum.

function Greet(greeting: string, ...names: string[]) {
    return greeting + " " + names.join(", ") + "!";
}

Greet("Merhaba", "Malik", "Masis"); // Çıktı: "Merhaba Malik, Masis!"
Greet("Merhaba");// Çıktı: "Merhaba !"

function Greet(...names: string[], greeting: string) {  // Çalışma anında hata
    return greeting + " " + names.join(", ") + "!";
}

     Nesne Yönelimli Programlama: Type script nesne yönelimli programlanın özelliklerini de kullanır demiştik. Burada class, interface, abstract,  inheritance yapıları da mecvuttur. Bunlara nesne yönelimli dilleri kullanan arkadaşların adapte olması tabi ki daha hızlı olacaktır. Bu yapıları kısa bir örnek ile ele alacağım. Eğer bu konularda eksikleriniz varsa önce onları tamamlamanız daha iyi olacaktır. Çünkü nesne yönelimli programlamaya yönelik düşünmek gerekir ve bu da süreç alan bir iştir.

class Person {
    name: string;
    
    constructor(name: string) {
        this.name = name;
    }
}

class Employee extends Person {
    empCode: number;
    
    constructor(empcode: number, name:string) {
        super(name);//base (üst) sınıftan gelir.
        this.empCode = empcode; // buraya has olan değer
    }
    
    displayName():void {
        console.log("Name = " + this.name +  ", Employee Code = " + this.empCode);
    }
}

let emp = new Employee(100, "Malik");
emp.displayName(); // Name = Malik, Employee Code = 100

 
     readoly ve static: readonly C#'tan da bildiğimiz üzere bir değerin sadece okunabilir olmasıdır. Dışarıdan kendilerine erişebilir, fakat yalnızca constructor içinde veya başlangıçta değer ataması yapılır. Tek özellik için readonly kullanabiliyorken, tüm obje içinse Readonly<T> kullanabilir. static keyword ise obje oluşturulmadan her yerden erişilebilir.

//Readonly<T> kullanımı
interface IEmployee {
    empCode: number;
    empName: string;
}

let emp1: Readonly<IEmployee> = {
    empCode:1,
    empName:"Malik"
}

emp1.empCode = 100; // Derleme hatası, hiç bir propertiye değer ataması yapılmaz.

//Readonly kullanımı
interface IEmployee {
    readonly empCode: number;
    empName: string;
}

let empObj:IEmployee = {
    empCode:1,
    empName:"Malik"
}

empObj.empCode = 100;  // derleme hatası verir.
embObj.empName = "derlenir",

//static keyword kullanımı
class Circle {
    static pi = 3.14;

    static calculateArea(radius:number) {
        return this.pi * radius * radius;
    }

    calculateCircumference(radius:number):number { 
        return 2 * Circle.pi * radius;
    }
}

Circle.calculateArea(5); // static metod olduğundan esne oluşturulmadan direkt çağrılır.

let circleObj = new Circle(); // static olmayan yapıya ulaşmak için obje oluşturulmalıdır.
circleObj.calculateCircumference(5);
//circleObj.calculateArea(); // derleme hatası verir. Direkt erişilmeli

     Generic Yapılar: Generic yapılar programlamanın olmazsa olmazlarındandır belki de. Bunu söyleme amacım iş yükünü, kod bakımını azaltmaları sebebiyledir. Mesela orm ile kaydetme işlemi yapıyoruz, her model için bir işlem yapmak mı yoksa generic bir yapı oluşuturp sadece o yapıyı çağırmak mı daha güzel olur ?

//her değeri kabul eder
function getArray(items : any[] ) : any[] {
    return new Array().concat(items);
}

let myNumArr = getArray([100, 200, 300]);
let myStrArr = getArray(["Merhaba", "Dünya"]);

myNumArr.push(400); // OK
myStrArr.push("Merhaba TypeScript"); // OK

myNumArr.push("Selam"); // OK
myStrArr.push(500); // OK

console.log(myNumArr); // [100, 200, 300, 400, "Selam"]
console.log(myStrArr); // ["Merhaba", "Dünya", "Merhaba TypeScript", 500]

//type-safe hali
function getArray<T>(items : T[] ) : T[] {
    return new Array<T>().concat(items);
}

let myNumArr = getArray<number>([100, 200, 300]);
let myStrArr = getArray<string>(["Merhaba", "Dünya"]);

myNumArr.push(400); // OK
myStrArr.push("Merhaba TypeScript"); // OK

myNumArr.push("Selam"); // derleme anında hata, çünkü type-safe ve sadece number alır.
myStrArr.push(500); // derleme anında hata, çünkü type-safe ve sadece string alır.

  Angular'ı daha iyi bir yapıya oturtabilmek için öncelikle type scripti iyi bilmek lazım. Biz de o yüzden küçük bir özetle konuların üzerinden geçmek istedik. Kod örneklerini ve konuları daha ayrıntılı olarak incelemek isterseniz buraya göz atabilirsiniz.

   Type-safe kodlar yazmak dileğiyle.