Typescript Interface Function Interface Extending Interface
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.
kullanici
adı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.