Typescript Interface Function Interface Extending Interface

Photo by Markus Spiske on Unsplash

Interface, bir önceki konuda bahsettiğimiz type alias ifadesinin yazım şeklinden hiç farklı olmayan bir konudur.

type ElmaType = {
   fiyat: number; 
   renk: string
}
interface ElmaType {
   fiyat: number; 
   renk: string
}

Type safe konusunda davranış şekilleri birbirinin aynısıdır. Ancak Interface lerin çok önemli bir kaç farkı vardır:

• Typescript Class ları sadece Interface lerden implement olur.
• Sadece Interface ler birbirinden extend olur.

kullaniciadında nesnemizi oluşturalım, önce interface yapalım.

interface KullaniciInterface{
    id: number;
    ad: string;
    soyad: string;
    ilgiAlanlari: string[];
    cinsiyet: {
        kadin: boolean;
        erkek: boolean;
    };
}

KullaniciInterface adında bir Interface oluşturdum. id, ad, soyad, ilgiAlanlari, cinsiyet propertyleri var.

Şimdi de Interface i küçük parçalara ayıralım.

type KullaniciIlgiAlanlariType = string[];
interface KullaniciCinsiyetInterface{
    kadin: boolean; 
    erkek: boolean;
}
interface KullaniciInterface{
    id: number;
    ad: string;
    soyad: string;
    ilgiAlanlari: KullaniciIlgiAlanlariType;
    cinsiyet: KullaniciCinsiyetInterface;
}

KullaniciIlgiAlanlariType adında bir type alias oluşturdum ve KullaniciInterface içerisinde ilgiAlanlari bölümüne atama yaptım. Benzer yöntemi cinsiyet property sine uyguladım. Kullanici mızın Interface i hazır.

Kullanici nesnemize getirAdSoyad isimli bir metot ekleyelim.

interface KullaniciInterface{
    id: number;
    ad: string;
    soyad: string;
    ilgiAlanlari: KullaniciIlgiAlanlariType;
    cinsiyet: KullaniciCinsiyetInterface;
    getirAdSoyad(): string;
}

getirAdSoyad metodu string bir ifadeyi return ediyor. Bu metodu type alias olarak belirtebiliriz.

type getirAdSoyadType = () => string;
interface KullaniciInterface{
    id: number;
    ad: string;
    soyad: string;
    ilgiAlanlari: KullaniciIlgiAlanlariType;
    cinsiyet: KullaniciCinsiyetInterface;
    getirAdSoyad: getirAdSoyadType;
}

getirAdSoyadType adında bir type alias oluşturdum ve kullanici nesnesinde getirAdSoyad metodunun tip tanımlamasını yeniden düzenledim.

getirAdSoyadType örneğinde olduğu gibi function tipleri oluşturabiliriz.

Class bölümüne geçtiğimizde Interface lerin gücünü daha iyi anlayacağımızı düşünüyorum. Şimdi Interface Extending konusuna bakalım.

Kisi adinda bir nesnemiz olsun ve Kullanici nesnesi kisiden türetilsin:

interface KisiInterface{
    id: number;
    ad: string;
    soyad: string;
    cinsiyet: {
        kadin: boolean; 
        erkek: boolean
    };
}

kisi nesnesi içerisinde id, ad, soyad, cinsiyet property leri vardır. Şimdi de kullanici nesnesi oluşturalım ve içerisinde ilgiAlanlari, getirAdSoyad property leri olsun.

interface KullaniciInterface{
    ilgiAlanlari: string[];
    getirAdSoyad(): string;
}

Ancak kullanici nesnesinin de id, ad, soyad, cinsiyet property lerinin olması gerekiyor.

interface KisiInterface{
    id: number;
    ad: string;
    soyad: string;
    cinsiyet: {
        kadin: boolean; 
        erkek: boolean
    };
}
interface KullaniciInterface extends KisiInterface{
    ilgiAlanlari: string[];
    getirAdSoyad(): string;
}

extends KisiInterface ifadesi ile KullaniciInterface oluşturdum ve artık KullaniciInterface nesnemin de id, ad, soyad, cinsiyet property leri var.

Ekran görüntüsünden anlaşılacağı gibi KisiInterface nesnesinin tüm property leri KullaniciInterface üzerinde ipucu olarak görüntülenmektedir.

Henüz eklemediğim property ler ise uyarı olarak görüntüleniyor.

Sonraki konumuz Interface Optional Property, Index Signature olacaktır.