TypeScript 4. Bölüm: Arayüzler

(Son Güncelleme: )
typescript
,

Arayüzler

Final dönemi için verdiğim uzun süreli mecburi aradan sonra kaldığımız yerden devam edelim.
Diğer nesne tabanlı dillerden tanıdığımız arayüzler TypeScript dilinde de işimizi kolaylaştırmak için mevcut durumda.

Fonksiyonlar bölümünde bahsettiğim isteğe bağlı parametreler bu kısımdaki özellikler için de kullanılabilir.
Basitçe örneklemek gerekirse; 

1
2
3
4
5
interface Dortgen {
    renk?: string; 	// renk özelliğimiz isteğe bağlı
    genislik: number;	// genislik özelliğimiz belirlenmek zorunda
    yukseklik: number;	// yukseklik özelliğimiz belirlenmek zorunda
}

Arayüz kullanımını daha iyi açıklayabilmek için bu örneğimizi fonksiyonlar ile genişletelim;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function dortgenOlustur(d: Dortgen): {renk: string; alan: number} {

    // geçici dortgen değişkenimiz
    let dortgen = {renk: "kırmızı", alan: 100};

    // renk belirtilmiş ise dörtgenimizin rengini atıyoruz
    if (d.renk) {
        dortgen.renk = d.renk;
    }

    // kenar uzunlukları belirtilmiş ise
    if (d.genislik && d.yukseklik) {
        // dörtgenimizin alanını hesaplıyoruz
        dortgen.alan = d.genislik * d.yukseklik;
    }

    // geçici değişkenimizi geriye gönderiyoruz
    return dortgen;
}

// beyaz renkli, alanı 80 olan bir dörtgen oluşturuyoruz
let dikdortgen = dortgenOlustur({
        renk: "beyaz",
        genislik: 8,
        yukseklik: 10
    });

Yukarıdaki örneğimizde arayüzü nesne özelliklerini tanımlamakta kullandık.

TypeScript arayüzlerde bu kullanımın yanı sıra fonksiyon türlerini açıklama amaçlı kullanıma da imkan sunuyor. Bunu da son örneğimiz ile şöyle göstermiş olalım;

Arayüzümüz; 

1
2
3
4
interface metinAramasi {
	// parametrelerimiz ve geriye dönüş tipimiz
    (kaynak: string, aranan: string): boolean;
}

Fonksiyonumuz;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// arayüzümüz tipinde oluşturduğumuz fonksiyonumuz
let metinAra: metinAramasi;

metinAra = function(kaynak: string, aranan: string) {

    let durum = kaynak.search(aranan);

    // kaynak aranan metni içermiyor ise
    if (durum == -1) {
        return false;
    }

    // kaynak aranan metni içeriyor ise
    else {
        return true;
    }
}

Gördüğünüz gibi arayüzümüzü fonksiyonumuzun parametrelerini ve dönüş değer türünü tanımlamak için kullandık.

Sınıflar ile birlikte kullanımı gibi daha detaylı konulara buraya tıklayarak TypeScript sitesindeki dökümanlardan ulaşabilirsiniz.

Java ve diğer diller ile ne kadar benzer yazım şekilleri olduğunu keşfedeceksiniz. Sonraki yazılarda görüşmek üzere.