A’dan Z’ye TypeScript

TypeScript Nedir?

TypeScript, Microsoft tarafından geliştirilen açık kaynak bir programlama dilidir. JavaScript diline katı kurallar eklemeyi sağlar.

TypeScript Özellikleri

★ TypeScript = JavaScript’tir: TypeScript temel yapı taşlarını JavaScript’ten alır. Bu nedenle TypeScript’i öğrenmeden önce JavaScript yetkinliğinizin olması gerekir. TypeScript ile yaptığınız bütün geliştirmeleriniz, makalenin kurulum adımında da göreceğiniz üzere JavaScript’e dönüştürülür.

★ TypeScript, tüm JavaScript kütüphanelerini destekler: TypeScript ile derlenen JavaScript çıktısı, bütün javascript kütüphaneleri ile birlikte kullanılabilir.

★ TypeScript, taşınabilir ve portatiftir: TypeScript platform-serbest bir dildir ve farklı tarayıcılarda, cihazlarda, işletim sistemlerinde çalışabilir. javaScript’in çalıştığı herhangi bir ortamda çalışabilir. Hali hazırda javaScript ile geliştirilme yapılan bir projeye entegre edilebilir.

TypeScript Avantajları

★ TypeScript, nesne yönelimlidir.

★ TypeScript, statik veri tiplemesine sahiptir.

★ TypeScript, ES6 özelliklerini içeririnde barındırır.

★ TypeScript, modülerdir.

★ TypeScript’in söz dizimi Java, C# gibi yüksek seviyeli dillere benzerdir.

TypeScript kodları, tarayıcılar tarafından direkt olarak yorumlanamayacağı için kodların derlenmesi ve JavaScript çıktısının oluşturulması gerekiyor.

Eğer hemen TypeScript yazmaya başlamak isterseniz, makalenin kurulum adımını geçerek, Codepen’i veya TypeScript’in kendi dokümantasyon sayfasındaki Playground’ı kullanabilirsiniz.

TypeScript Kurulumu

TypeScript’i kurabilmek için ilk başta bilgisayarımızda Node Js’in kurulu olması gerekiyor. Ardından terminal üzerinden,

npm install -g typescript

komutunu çalıştıralım.

Şimdi örnek olarak, terminal üzerinden TypeScript yazmak istediğimiz dizine ilerleyerek, dizinimizde bir main.ts oluşturalım ve içerisine,

const num:number = 12 
console.log(num)

bu kodları yazalım.

Ardından,

tsc main.ts -w

komutunu terminalde çalıştıralım.

Bu komut ile ana dizinimde bulunan main.ts dosyası JavaScript’e dönüştürülerek, ana dizine çıktılandı ve ana dizindeki main.js dosyasının içeriği,

var num = 12; 
console.log(num);

bu şekilde oldu.

-w parametresi main.ts dosyasıdaki değişikliklerin anlık olarak izleneceği ve dosya içerisindeki kodların anlık olarak main.js dosyasına çıktılanacağı anlamına gelir. Zorunlu bir parametre değildir.

Bu sayede ilk TypeScript kodumuzu yazmış ve derlemiş olduk. 🙂

Yapılandırma (Configuration) ve Klasör Yapısı

Terminalde,

tsc --init

komutunu çalıştırdıktan sonra. dizinimizde tsconfig.json dosyası oluşacaktır. Dizinizimde oluşan config dosyasındaki parametreleri düzenleyerek örnek bir klasör yapısı oluşturalım.

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "module": "commonjs",
        "target": "es6",
    },
    "include": ["src"],
    "exclude": ["node_modules", "build", "dist","__test__"]
}

Bu yapılandırma dosyasına göre, src dizini içerisinde yer alan .ts dosyalarımız dist dizinine çıktılanacaktır.

Statik Veri Tiplemesi (Static Type Checking) Nedir?

TypeScript ile değişkenler, fonksiyonlar, ve fonksiyon parametreleri için tip kontrolü (type checking) yapabilirsiniz.

Özellikleri

★ Tamamen isteğe bağlıdır.

★ Hataları bulmanıza ve önlemenize yardımcı olur.

★ Daha açıklayıcı ve okunaklı kod yazmanızı sağlar.

Tipler

★ String: Metinsel veri türleri için kullanılır.

let color: string = "blue";
color = 'red';

★ Number: Sayısal veri türleri için kullanılır. ES6 ile gelen ikili ve sekizli değerleri de destekler.

let decimal: number = 6;
let float: number = 6.5;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

★ Boolean: true/false değerler için kullanılır.

let isLoading: boolean = true;
let isDone: boolean = false;

★ Array: Dizi tanımlamaları için kullanılır. İki farklı yazım şekli vardır.

// 1. Yöntem
let list: number[] = [1, 2, 3];

// 2. Yöntem
let list: Array<number> = [1, 2, 3];

★ Any: Bilinmeyen değişken tipleri için kullanılır. Örneğin, dinamik değerler içeren değişkenler için kullanılabilir.

let notSure: any = 4;
notSure = "Değer string olarak değişti :)";
notSure = false;

★ Void: Geriye herhangi bir değer return etmeyen fonksiyonlarda ve null veya undefined değer içeren değişkenlerde kullanılır.

// Fonksiyonlarda kullanımı
function warnUser(): void {
 console.log("Bu fonksiyon geriye herhangi bir değer return edemez...");
}

// Değişkenlerde kullanımı
let unusable: void = undefined;
unusable = null;

★ Null: null değer içeren değişkenlerde kullanılır.

let users: null = null;

★ Undefined: undefined değer içeren değişkenlerde kullanılır.

let users: undefined = undefined;

★ Tuple: Grup türleri bilinen ancak aynı olması gerekmeyen dizilerde kullanılır.

let x: [string, number];
x = ["merhaba", 10]; // Başarılı

x = [10, "merhaba"]; // Başarısız

★ Enum: Obje içerisindeki key’lere veya key değerlerine daha kolay erişmek için kullanılır.

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

Key değerleri, varsayılan olarak 0'dan başlar ancak bunu değiştirmek mümkündür.

Tek bir key’in değerini veya birden fazla key’in değerini değiştirebiliriz. 👌💪

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

// veya

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

Key’lere erişmek için indis numarasını yazmamız yeterli. 😋

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];

console.log(colorName) // "Green"

Takma Adlar (Type Alias)

type sözcüğü ile tanımlanan ifadeler, tipleri içerisinde tutar ve bu tipleri birden fazla yerde kullanmamıza olanak tanır. 👌

type user = string | object

let user: user = { name: 'Melis', age: 22 }
let userTwo: user = 'Melis'

Yukarıdaki örnekte yer alan user alias’ı hem string tipindeki değişkenleri hem de object tipindeki değişkenler için tip kontrolünü sağlar.

Fonskiyonlar

★ Void: Geriye herhangi bir değer return etmeyen fonksiyonlarda kullanılır.

const user = (name: string, age: number): void => {
  console.log(`İsminiz: ${name} ve yaşınız: ${age}`);
};

★ Geriye Değer Döndürebilen Fonksiyonlar:

let logDetails = (user: { name: string; age: number }): string => {
  return `İsminiz: ${user.name} ve Yaşınız: ${user.age}`;
};

Yukarıdaki örnek, object tipinde parametre alan ve geriye string tipinde değer döndüren bir fonksiyon kullanım örneğidir.

★ Parametresi Zorunlu (Required) Olmayan Fonksiyonlar:

let logDetails = (user: { name: string; age?: number }, action?): string => {
  if (action === 'add') {
    return 'Kullanıcı eklendi';
  }
  return `İsminiz: ${user.name} ve Yaşınız: ${user.age}`;
};

const userString = logDetails({ name: 'Melis' }, 'add');
console.log(userString);

Yukarıdaki örnekte, action parametresi ve user objesi içinde gönderilen age anahtar kelimesi, zorunlu bir parametre değildir. Fonksiyon çalıştırıldığında bu parametreler gönderilmemiş durumsaysa bu kısım işleme alınmaz.

Sınıf Tabanlı Objeler (Class Based Object)

Sınıflar (Classes)

class User {
  name: string;
  age: number;

  constructor(a: string, b: number) {
    this.name = a;
    this.age = b;
  }

  get() {
    return `İsminiz: ${this.name} ve Yaşınız: ${this.age}`;
  }
}

const user = new User('Melis', 22);

user.name = 'Yasin';
user.age = 21;

Yukarıdaki örnektede gördüğümüz üzere, sınıf içerisinde yapılan değişken tipi tanımlamaları ve method içerisine gönderilen parametrelerin tip tanımlamaları, değişkenler ve fonksiyonlardaki ile aynıdır.

Soyut Sınıflar (Abstract Classes)

Soyut sınıflar,

★ Kendi instance objesinden türeyemeyen sınıflardır.

★ Kendisini kullanan başka sınıfların instance’ları aracılığıyla içerisindeki özelliklere erişilmesini sağlayan sınıflardır.

abstract class User {
  name: string;
  age: number;

  constructor(a: string, b: number) {
    this.name = a;
    this.age = b;
  }

  get() {
    return `İsminiz: ${this.name} ve Yaşınız: ${this.age}`;
  }
}

const user = new User('Melis', 22); // Error: Cannot create an instance of an abstract class.

Eğer soyut bir sınıftan instance üretmeye çalışırsak, hata alırız.

abstract class User {
  name: string;
  age: number;

  constructor(a: string, b: number) {
    this.name = a;
    this.age = b;
  }

  get() {
    return `İsminiz: ${this.name} ve Yaşınız: ${this.age}`;
  }
}

class Person extends User {
  constructor(a,b) {
    super(a,b);
  }

  sayHello() {
    return `Merhaba ${this.name}`
  }
}

const person = new Person('Melis', 22);

console.log(person.get());
console.log(person.sayHello());

Yukarıdaki örnekte, Person sınıfı instance’ından türetilen obje ile hem Person sınıfı içindeki parametrelere hem de User sınıfı içindeki parametrelere erişilebilir.

Interface

Dışarıdan erişilebilir durumda olan elemanları, objelere veya sınıflara bildiren yapılardır.

★ Birbirlerinden extend olabilirler.

★ Birbirlerinden implement olamazlar.

★ Objelere ve sınıflara atanabilirler.

Objelerde Kullanımı

interface IsPerson {
  name: string;
  age?: number;
  speak(a: string): void;
}

const user: IsPerson = {
  name: 'Melis',
  // age: 22,
  speak(text: string): void {
    console.log(text);
  },
};

console.log(user);
user.speak('Merhaba!');

Yukarıdaki örnekte, age değeri obje içerisinde kullanımı zorunlu bir parametre olmadığı için soru işareti (?) ile birlikte kullanılmıştır.

Sınıflarda Kullanımı

interface IsPerson {
  name: string;
  age?: number;
  speak(a: string): void;
}

// implements ifadesi ile kullanılır
class User implements IsPerson {
  name: string = 'Melis';
  age: number = 22;

  speak(): string {
    return `Merhaba ben ${this.name} ve yaşım ${this.age}`;
  }
}

const user = new User();

console.log(user.speak());

Yukarıdaki örnekte, User sınıfı, IsPerson Interface’i içinde tanımlanmış olan özellikleri kullanmaktadır.

“public”, “private” ve “readonly”

★ public: Sınıf içerisinde kullanılan özellikleri dışarıdan erişilebilir ve değiştirilebilir hale getirir.

★ private: Sınıf içerisinde kullanılan özelliklerin dışarıdan erişilebilme ve değiştirilebilme durumunu devre dışı bırakır.

★ readonly: Sınıf veya Interface içerisinde kullanılan özelliklerin dışarıdan değiştirilebilme durumunu devre dışı bırakır.

Interface’lerde Kullanımı

interface IsPerson {
  readonly name: string;
}

const user: IsPerson = {
  name: 'Melis'
};

user.name = 'Yasin'; // Error: Cannot assign to 'name' because it is a read-only property

Sınıflarda Kullanımı

class User {
  readonly name: string;
}

const user = new User();
user.name = 'Yasin'; // Error: Cannot assign to 'name' because it is a read-only property

Sınıf veya obje içerisindeki readonly değerleri değiştirmeye çalışırsak, hata alırız.

Sonuç

JavaScript diline katı kurallar eklememize yardımcı olan TypeScript, ilk başlarda göze biraz tuhaf gözükse de alıştıktan sonra geliştirme esnasında karşımıza çıkardığı hata mesajlarıyla hayatımızı kolaylaştırıyor.

Bu makalede kullandığım resimlere ve paylaşmış olduğum kaynak kodlara, makale içerisinde bırakmış olduğum resimlerin altındaki linkler üzerinden ulaşabilirsiniz.

Makaleyi hazırlarken kullandığım kaynaklar;

TypeScript Documentation: https://typescriptlang.org

The Net Ninja: https://www.youtube.com/watch?v=2pZmKW9-I_k&list=PL4cUxeGkcC9gUgr39Q_yD6v-bSyMwKPUI

Traversy Media: https://www.youtube.com/watch?v=rAy_3SIqT-E