Typescript Nedir?

Son zamanlarda git gide popülatesi artan Javascript'in başlangıçta sadece browser tarafında çalışacak şekilde tasarlanması fakat daha  sonra Node.js ile sunucu tarafında hatta bununla da yetinmeyip Electron.js ile masaüstü uygulamaları geliştirmemize olanak sağladı. Durum böyle olunca başta sadece küçük projeler için kullanılması planlanan Javascript zaman geçtikçe çok daha farklı ve tahmin edilemez bir noktaya ulaştı.

Küçük bir dil olması planlandığı için içerisinde classlar, modüller, interfaceler vb.. bulunmuyordu. Bu nedenle büyük ölçekli projeleri javascript ile geliştirmek ve geliştirdikten sonra bu uygulamaların analizde/yönetimde zorluğu da beraberinde getiriyordu. Hal böyle olunca .NET'in babalarından birisi olan Anders Hejlsberg ve ekibi Javascript'in bir  üst kütüphanesi olan Typescript'i open source olarak geliştirdiler. Ayrıca typescript'in sitesine şuradan erişebilirsiniz

Peki neden bu dili geliştirme ihtiyacı doğru?

• Yukarıda da belirtiğim gibi ihtiyaç duyulmasının en önemli nedenlerinden bir tanesi büyük ölçekli projelerde analiz ve yönetimde javascript'in sıkıntılar çıkarması.
• Nesne tabanlı programlamın özelliklerini(Abstraction, Encapsulation, Inheritance, Polymorphism vb. gibi) taşmıyor olması.
• Javascript'in Dinamik olması ona büyük bir güç katarken aynı zamanda development esnasında da bize bir o kadar zorluk çıkarıyor. Kod içerisindeki hataları bulmamız ve kodun bakımını yapmamız zorlaşıyor. Statik programlama dillerinin(C#,Java vb..) development esnasında bize sağladığı güzellikleri (refactoring, find references vb..) düşünürsek Javascript doğası gereği bu yeteneklerden de mahrum kalıyor.
• Esnek bir dil olduğu için modern dillerde alışa geldiğimiz editor/geliştirme aracı desteği tam olarak javascript için verilemiyor.

bunlar ve benzeri nedenlerden dolayı typescript'i geliştirme ihtiyacı duydular. Syntax olarak javascript'e benzeyen ama ayrı bir gramer yapısı olan bir javascript üst kümesi olarak tanımlamak daha doğru olacaktır.  TypeScript’te aynı .Net framework gibi bir derleyici tarafından yorumlanarak ara bir dile dönüştürülüyor. Bu ara dil .net framework için CLR iken, TypeScript için javascript oluyor.

Kurulum
Typescript'i editör olarak  VS Code, WebStorm, Atom, Sublime Text, ve Eclipse gibi birçok editör ile kullanabilirsiniz. Ayrıca nodejs ile de kullanma şansınız mevcut. Ben visual studio 2015 kullanacağım. Aşağıdaki adreslerden setuplara ulaşabilirsiniz.

Visual studio 2013 için Typescript


Visual studio 2013 için Typescript

Son olarak Nodejs ile yüklemeniz için

$ npm install -g typescript


Visual studio 2015 ile şu şekilde yeni bir typescript projesi oluşturabilirsiniz.

Basit tiplerin kullanımı

Boolean

En temel veri türlerinden birisi olan javascript ve diğer dillerde de olan boolean tipi kullanımı.

var gender: boolean = false;

Number

Sayısal verileri tutmamızı yarayan tiplerinden birisi de number tipi.

var age: number = 22;

String

Metinsel ifadeleri tuttuğumuz string değişkeni javascript de olduğu gibi typescript de tektırnak ' yada çift tırnak " şeklinde kullanılabiliyor.

var name: string = "ali";
name = 'veli';

Array

Typescripte dizi tanımlaması iki şekilde oluyor ilk yol...

var list:number[] = [1, 2, 3];

ikinci yöntem ise generic array tipi oluşturarak da dizi tanımlaması yapabiliyoruz.

var list:Array<number> = [1, 2, 3];

Enum

C# ve diğer dillerde olduğu gibi sayısal verilerin kullanılmasında yardımcı olan enum tipini şu şekillerde kullanımı mevcut

enum Color {Red, Green, Blue};
var c: Color = Color.Green;

Varsayılan olan enum üyelerinin değerlerini değiştirebiliriz örneğin : 0 dan başlatmak yerine 1 den başlatabiliriz.

enum Color {Red = 1, Green, Blue};
var c: Color = Color.Green;

Yada tüm enum elemanlarının değerlerini ayarlayabiliriz.

enum Color {Red = 1, Green = 2, Blue = 4};
var c: Color = Color.Green;

Enumların bir diğer kullanışlı özelliği ise sayısal değerler ile erişebiliyor olmamız. örneğin adını bilmiyoruz ama ikinci sıradaki enum değerine erişmek istiyoruz bu durumda şöyle bir yöntem izlenebilir.

enum Color {Red = 1, Green, Blue};
var colorName: string = Color[2];// burada enum'daki ikinici sıradaki değer olan green dönecektir.

AnyBazı durumlarda veri tipinin ne olacağını bilmediğimiz durumlar olabiliyor örneğin 3. parti araçlarını kullanırken gelecek olan verinin tipini bilemediğimiz durumlarda yada dinamik içerik üretmemiz gerektiği yerlerde any tipini kullanabiliriz.

var unknownType: any = 4;
unknownType = "maybe a string instead";
unknownType = false; // en son atadığımız değerin tipi ne ise değişkenimizin tipi o olur.

Ayrıca dizilerde any tipini kullanıp farklı tipleri aynı dizi içerisinde tutmamızda mümkün.

var list:any[] = [1, true, "free"];

list[1] = 100;

InterfacesBurada aslında şöyle bir durum söz konusu Interfaces'in javascripte bir karışılı yok bu yüzden typescripte tip kontrolü yapılırken, javascript tarafında ise dilin dinamik yapısından faydalanmış.

interface LabelledValue { label: string; }

function printLabel(labelledObj: LabelledValue) {
console.log(labelledObj.label);
}

var myObj = {size: 10, label: "Size 10 Object"};

printLabel(myObj);

Interfaces Opsiyonel Özellikler

Interfaces'deki tiplerin isteğe bağlı olarak girilmesini isteğebiliriz böyle bir durum şu şekilde gerçekleştirebilir.

interface SquareConfig {
// Altaki iki satırda görmüş olduğunuz gibi değişken adının sonuna ? koyarak opsiyonel olarak tanımlayabiliriz
  color?: string;
  width?: number;
}

function createSquare(config: SquareConfig): {color: string; area: number} {
  var newSquare = {color: "white", area: 100};
  if (config.color) {
    newSquare.color = config.color;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

var mySquare = createSquare({color: "black"});

Interfaces Class Tipi

C# ve java dillerinde olduğu interfaces'i sınıfa implements edilmesi mümkündür.

interface ClockInterface {
    currentTime: Date;
}

class Clock implements ClockInterface  {
    currentTime: Date;
    constructor(h: number, m: number) { }
}

Extending Interfaces

Sınıflarda olduğu gibi arayüzleri de birbirlerine ekleyerek de kullanabiliriz..

interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}

var square = <Square>{}; square.color = "blue";
square.sideLength = 10;

Hybrid Tipler

Interfaces ile ilgili son olarak javascriptin yapısında bulunan interval, HTMLElement ve HTMLInputElement gibi javascript tiplerinide interfaces içerisinde tanımlayabiliriz.

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

var c: Counter;
c(10);
c.reset();
c.interval = 5.0;

Sınıfların kullanılması

C#, java ve diğer programlama dillerinde olduğu gibi typescript'e de aynı mantıkla sınıflar oluşturabilirsiniz. Erişim belirleyiciler bölümünde tekrar söz edeceğiz ama diğer dillerden farklı olarak typescript de sınıflar varsayılan olarak public sayılır.

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

var greeter = new Greeter("world");

Inheritance

Typescript de nesne tabanlı programlamanın miras özelliğini kullanabilirsiniz. Bunun için C# dan farklı olarak extends komutunu kullanmamız gerekmektedir. Ayıca miras alınan sınıfın constructor'una parametre göndermek için : base yerine constructor içerisinde super fonsiyonunu kullanıyoruz.

Aşağıda Animal sınıfının Snake ve Horse sınıflarına miras edildiğini görebilirsiniz..

class Animal {
    name:string;
    constructor(theName: string) { this.name = theName; }
    move(meters: number = 0) {
        alert(this.name + " moved " + meters + "m.");
    }
}

class Snake extends Animal {
    constructor(name: string) { super(name); }
    move(meters = 5) {
        alert("Slithering...");
        super.move(meters);
    }
}

class Horse extends Animal {
    constructor(name: string) { super(name); }
    move(meters = 45) {
        alert("Galloping...");
        super.move(meters);
    }
}

var sam = new Snake("Sammy the Python");
var tom: Animal = new Horse("Tommy the Palomino");

sam.move();
tom.move(34);

Accessors

Değer okuma ve yazmada kullandığımız get ve set keyword'leri typescript ile kullanmamız mümkün aşağıdaki örnekte set propertiesinde bir şifre ile set işlemi gerçekleşen bir method var. Bu şifre doğru ise set işlemini gerçekleştiriyor yanlış ise alert ile bir uyarı vermektedir.

var passcode = "secret passcode";

class Employee {
    private _fullName: string;

    get fullName(): string {
        return this._fullName;
    }

    set fullName(newName: string) {
        if (passcode && passcode == "secret passcode") {
            this._fullName = newName;
        }
        else {
            alert("Error: Unauthorized update of employee!");
        }
    }
}

var employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
    alert(employee.fullName);
}


Sonuç

Sonuç olarak artık javascript tarafında da nesne tabanlı programlama tekniğini çok rahat bir şekilde kullanabiliyoruz. Bu makele hakkındaki görüşlerinizi veya sormak istediğiniz soruları yorum kısmından iletirseniz sevinirim.

Makalede kullandığım örnekleri şu siteden alıntıdır.

http://www.typescriptlang.org/Handbook