TypeScript Kullanımı

Husamettin Elalmis

Merhaba arkadaşlar, bu yazıda sizlere TypeScript kavramından, hızlandırılmış olarak bahsecedeğim.

TypeScript Nedir Nerelerde Kullanılır?

HTML tarafında ilk zamanlarda JavaScript vardı

Halen kullanılıyor

Ardından devrim niteliğinde JQuery geliştirildi, javascriptin geliştirilmiş halidir.

Aktif olarak kullanılıyor

Ardından devrim niteliğinde TypeScript geliştirildi, JQuery'nin OOP haline yakınlaştırılmış halidir

TypeScript, günümüz teknolojilerinde Standard haline geldi

Angular2.0 ile birlikte popular olmuştur, diğer teknoloji dillerine sıçramıştır

Yeni nesil Angular projelerinde TypeScript bir standart'dır. TypeScript olmadan proje olmaz.

TypeScript dosyaları fiziksel olarak ".ts" uzantısını alır

Hazırlanan TypeScript dosyaları derleyici tarafından JavaScript dosyalarına dönüştürülürler, bu şekilde çalıştırılırler

Aynı konsepte, yeni nesil SASS dosyaları da CSS dosyalarına dönüştürülerek çalıştırılırlar, bunu derleyici otomatik olarak yapar

JQuery halen base(temel) olarak kullanılmaya devam etmektedir, BootStrap4-5 versiyonlarında aktif olarak JQuery kullanılmaya devam etmektedir.

Angular projelerinde, hem TypeScript, hem JQuery komutları hibrit olarak kullanılabilmektedir.

Önemli Notlar

TypeScript kütüphanesi normalde kurulu olarak gelir (VS ile birlikte), güncellenmek istediğimizde aşağıdaki npm komutlarını gireriz

npm install -g @angular/cli
angular cli (command line interface) kurar
npm install -g typescript
typescript kurar
npm install -g nodemon

nodemon kütüphanesini kurar (typescript console çıktılarını görebilmek için)

terminal cmd consolde nodemon dosyamiz.js yazılarak output değişiklikleri anlık görülür

Kod yazarken terminal ekranında çıktılar görüntülenir

durdurmak için Ctrl+C basılır, Yes seçilir

https://angular.io/cli adresinden cli komutları detaylı olarak incelenebilir

Angular projelerinde bazı dosyalar komut satırından oluşturulabilir.

Function Tanımlamak

function selamVer(isim: string): string {
return "merhaba " + isim
}
function selamVer2(val: string): void {
console.log(val)
}
let mesaj = selamVer('helalmis') // merhaba helalmis
selamVer2('helalmis') // consola helalmis yazar
console.log(mesaj) // merhaba helalmis

String Tipi Tanımlamak

let sehir: string // string tip

sehir = "ankara"

sehir = "bolu"

Sayı Tipi Tanımlamak

let sayi: number // sayi tipi (int,short,byte,long,double olabilir)
sayi = 10
sayi = 10.5

Boolean Tipi Tanımlamak

let isDeleted: boolean // bool tipi

isDeleted = true

Array Tanımlamak

let sayi: number // sayi tipi (int,short,byte,long,double olabilir)
sayi = 10
sayi = 10.5
let arr: number[] = [1, 2, 3, 4]

let sayilar2: Array<number> = [1, 2, 3, 4] // generic tip

let dizi: [number, string] = [2, "ankara"] // tuple tip

console.log(dizi[0]) // 2

console.log(dizi[1]) // ankara

Enum Tanımlamak

enum Renk { Kirmizi = 1, Beyaz }

let renk: Renk = Renk.Kirmizi

console.log(renk) // 1

console.log(Renk[renk]) // Kirmizi

Any Tipi Tanımlamak

let val: any = "bişey" // any veri tipi

val = 2 // any veri tipi herşeyi kullanabilir

val = {} // obje tipi

Function Tanımlamak

function topla(a: number, b: number): number {

return a + b;

}

console.log(topla(5, 7)) // 12

Functionda Default Değer Kullanımı

// default değer kullanımı

function topla2(a: number, b: number = 2): number {

return a + b;

}

console.log(topla2(5, 7)) // 12

console.log(topla2(5)) // 7

Functionda Optional Parametre Kullanımı

// opsiyonel kullanımı - opsiyonel parametreler her zaman sağda yazılır

function topla3(a: number, b?: number): number {

if (b) // b defined ise

{

return a + b;

}

return a;

}

console.log(topla3(5)); // 5

Functionda Params Kullanımı

// rest parametreler (params)

function birlestir(...digerleri: number[]): string {

return digerleri.join("-")

}

console.log(birlestir(1, 7, 8, 14, 25))

Class Tanımlamak

// class isimleri PascalCase yazılır

// access modifierlerin default değeri publicdir

// private, public, protected olabilir

class Kisi {

private ad: string;

protected soyad: string;

public tcno: number;

constructor(ad: string, soyad: string) {

this.ad = ad;

this.soyad = soyad;

}

adsoyad(): string {

return this.ad + " " + this.soyad;

}

}

let kisi = new Kisi("Hüsamettin", "Elalmış")

console.log(kisi.adsoyad())

Inheritance Kullanmak

// inheritance

class Personel extends Kisi {

maasOde() {

console.log("Maaş ödendi")

}

}

class Musteri extends Kisi {

satisYap() {

console.log("satış yapıldı")

}

}

let personel = new Personel("Hüsamettin", "Elalmış")

personel.maasOde()

let musteri = new Musteri("Hüsamettin", "Elalmış")

musteri.satisYap()

Getter Setter Kullanmak

// getter setter - bu kod bloğu ecmascript5 ve yukarısı için çalışacağına dair uyarı verir

class Kisi2 {

private _ad: string

get ad(): string { return "Sn." + this._ad }

set ad(val: string) { this._ad = val }

}

let kisi2 = new Kisi2();

kisi2.ad = "Hüsamettin";

console.log(kisi2.ad);

// tsc -t es5 dosya.ts (ecmascript5 uyarısını yok etmek için consolda çalıştırılır)

Abstract Class Tanımlamak

// abstract class

abstract class KrediBase {

constructor() { }

kaydet(): void {

console.log("kaydedildi")

}

abstract hesapla(): void;

}

class TuketiciKredi extends KrediBase {

constructor() {

super(); // basein contructoru

}

hesapla(): void {

console.log("tüketici kredisi hesaplama yapıldı")

}

}

class MortgageKredi extends KrediBase {

constructor() {

super();

}

hesapla(): void {

console.log("mortgage kredisi hesaplama yapıldı")

}

}

var tk = new TuketiciKredi()

tk.hesapla();

// bu kredi değişkenini functiona parametre olarak geçebiliriz

let kredi: KrediBase

kredi = new TuketiciKredi()

kredi.hesapla()

kredi = new MortgageKredi()

kredi.hesapla()

Interface Kullanımı


// interface kullanımı - PascalCase

interface IProduct {

id: number

name: string

unitPrice: number

}

function save(product: IProduct) {

console.log(product.name + " kaydedildi")

}

// interface olduğu için tüm parametreler zorunludur

save({ id: 1, name: "laptop", unitPrice: 10 })

interface IProductService {

save()

}

// interface -> implemenets. Inhterit -> extends. base -> super

class ProductService implements IProductService {

save() {

console.log("ProductService save çalıştı")

}

}

let ps = new ProductService()

ps.save()

Döngüler

// loops

let sehirler = ['ankara', "bolu", "istanbul"]

for (let i in sehirler) {

console.log(i) // in indis numarasını kullanır, 0'dan başlar

}

for (let i of sehirler) {

console.log(i) // of value değerini verir. ankara

}

Generic Kullanmak

// generics

function method2(x: number): number {

return x;

}

let sayi2 = method2(10)

console.log(sayi2)

function method3<T>(x: T): T {

return x;

}

let sayi3 = method3<number>(2)

console.log(sayi3)

let sehir3 = method3<string>("ankara")

console.log(sehir3)

class GenericClass<T>{

degisken: T

fonksiyon(parametre: T): T { return parametre }

}

let sinif = new GenericClass<string>()

sinif.fonksiyon("ankara")

Sonuç

Bu dokumanda TypeScript kullanımının temellerinden hızlıca bahsedilmiştir

Angular2.0 ve sonraki versiyonlarda TypeScript kullanımı zorunlu olmuştur

Angular12 son versiyondur (2021/08/23 tarih itibari ile)

Angular projelerinde servis tarafları ve typescript tarafları ilk başlarda elle yazılır

Zaman içerisinde generator yazımına doğru gider

Model tanımlamalarına göre TypeScriptler ve Angular-Service tarafları oluşturulur

Saygılarımla,

Hüsamettin ELALMIŞ – 23.08.2021

[email protected]