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
// 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
