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 nodemonnodemon 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 helalmisString 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.5Boolean Tipi Tanımlamak
let isDeleted: boolean // bool tipi
isDeleted = trueArray 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]) // KirmiziAny Tipi Tanımlamak
let val: any = "bişey" // any veri tipi
val = 2 // any veri tipi herşeyi kullanabilir
val = {} // obje tipiFunction Tanımlamak
function topla(a: number, b: number): number {
return a + b;
}
console.log(topla(5, 7)) // 12Functionda 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)) // 7Functionda 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)); // 5Functionda 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
husamettin.elalmis@arksoft.com.tr
Last updated