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.
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
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';
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
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;
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.
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.
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ış.
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"};
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 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
