TypeScript'te Tür ve Arayüz

Type vs. Interface , TypeScript'teki en kafa karıştırıcı ve ilginç şeylerden biridir. Bu karışıklığı gidermeye çalışacağız.

TypeScript, statik türler ekleyen JavaScript'in üzerinde oluşturulur. Tiplere sahip olmak geliştiriciler için harika bir şey. Tür yazmak zor olacak ama uzun vadede pişman olmayacaksınız.

TypeScript, sayı, dize, boole vb. gibi tüm temel türlere sahiptir. Temel türün yanı sıra TypeScript, özel türler oluşturmamıza ve Tür Takma Adları ve Arabirimler yardımıyla bir nesnenin nasıl görüneceğini tanımlamamıza olanak tanır, sırasıyla.

Bir Tür Takma Adı , bir Türden başka bir şey değildir. Özel bir adla (takma ad) bir tür oluşturmak, onu Tür Takma Adı yapar, bundan başka bir şey değildir.

Arayüzlerin ve Tür Takma Adlarının temel sözdizimine bakalım.

Temel Sözdizimi

Arayüzler

Arayüzler interface anahtar kelimesi ile bildirilecektir. Aşağıdaki arayüzlerin sözdizimini kontrol edin.

 interface InterfaceName { keyName: typeOfKey ... }

Aşağıdaki örnek örneğe bir göz atın.

 interface Site { name: string; url: string; pagesCount: number; } const geekflare: Site = { name: 'Geekflare', url: 'https://geekflare.com/', pagesCount: 25 }

Tür Takma Adları

Tür takma adları, type anahtar sözcüğü kullanılarak bildirilecektir. Aşağıdaki tür takma adlarının sözdizimini kontrol edin.

 type TypeName = { keyName: typeOfKey; ... }

Aşağıdaki örnek örneğe bir göz atın.

 type Site = { name: string; url: string; pagesCount: number } const geekflare: Site = { name: 'Geekflare', url: 'https://geekflare.com/', pagesCount: 25 }

Arayüz ve tür takma adını kullanarak Site için bir tür oluşturduk. Her ikisi de geçerlidir ve örneklerde belirtilen nesne türleri için kullanılabilir. Yukarıdaki örnekte sadece sözdizimi farklıdır, bu açıktır.

Daha fazla şey bulmak için aralarındaki farkları keşfetmeye devam edelim.

demetler

TypeScript'teki bir demet , önceden tanımlanmış bir uzunluk dizisidir. Her dizinin türlerini tanımlar.

Tür takma adlarını kullanarak demetleri bildirebiliriz. Ama bunu arayüzler kullanarak yapamıyoruz. Bunu tür takma adlarıyla nasıl yapacağımızı görelim.

 type Site = [string, string, number] const geekflare: Site = ['Geekflare', 'https://geekflare.com/', 25]

Yukarıdaki örnekte, dizi için her bir indeks elemanının tipini tanımladık. Dizide başka bir tip verirsek TypeScript hata verecektir.

Arayüzlerle yapamaz mıyız?

Bunu tam olarak tür takma adlarıyla yaptığımız gibi yapamayız. Arayüzler nesne türleri için kullanılır. Yani, onu arayüzlerde kullanmak için nesnenin içinde Tuple'a ihtiyacımız var. Bir örnek görelim.

 interface Site { details: [string, string]; pagesCount: number; } const geekflare: Site = { details: ['Geekflare', 'https://geekflare.com/'], pagesCount: 25, }

Kodu görürseniz, Arayüzün içinde ayrıntılar adında bir demetimiz var. Böylece, arayüzlerin içindeki demetleri kullanabiliriz.

Benzer şekilde, string, number, boolean vb. gibi tek tipler için tip takma adları kullanabiliriz. Arayüz, nesne türleri için kullanıldığından, onu tür takma adları gibi tek tipler için kullanabiliriz.

Bir başka ilginç şey de, arabirimlerde takma ad tuple tipini kullanabilmemizdir. Aşağıdaki örneği kontrol edin.

 type Details = [string, string] interface Site { details: Details; pagesCount: number; } const geekflare: Site = { details: ['Geekflare', 'https://geekflare.com/'], pagesCount: 25, }

Bir sonraki konuya geçelim.

Bildirim Birleştirme – Arayüzler

Bildirim birleştirme, aynı ada sahip arabirim türlerini birleştirmek için TypeScript kullanmaktır. Daha fazla netlik elde etmek için örneğe bakalım.

 interface Site { name: string; } interface Site { url: string; } interface Site { pagesCount: number; } const geekflare: Site = { name: 'Geeflare', url: 'https://geekflare.com/', pagesCount: 25, }

Yukarıdaki kodu görüyorsanız, Arayüz'ü aynı isimle 3 kez ilan ettik. TypeScript derleyicisi, tüm bu 3 formu, aynı ada sahip arabirimlerdeki tüm türleri içeren tek bir nesne türünde derleyecektir.

geekflare nesnesinden bir anahtarı kaldırarak bildirim birleştirmeyi onaylayabilirsiniz. Anahtarlardan birini geekflare kaldırırsanız bir hata görürsünüz.

Aynı şeyi tür takma adlarıyla yapamayız. Çoğu kişi bu özelliği kullanmaz. Genel olarak, aynı ada sahip birden fazla arabirime sahip olmak kafa karıştırıcıdır.

Takma ad hayranları yazın, arayüzlerin bu özelliği hakkında endişelenmeyin.

uzatır

Diyelim ki bir tür ilan ettiniz. Şimdi, önceki türün türleriyle birlikte başka bir tür bildirmek istiyorsunuz. Bu durumda, önceki türü genişletebiliriz. Bunu hem arabirimlerle hem de takma adlarla yapabiliriz.

İkisini de görelim.

Arayüzler

extends bu kullanım durumu için extension adında bir anahtar kelime var. Arayüzleri genişletmek için kullanacağız. Örneği kontrol edelim.

 interface Site { name: string; url: string; pagesCount: number; } interface Geekflare extends Site { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Site Arayüzünü genişleterek Geekflare Arayüzünü oluşturduk. Tüm Site türleri, kendi türleriyle birlikte Geeflare Arayüzünde bulunacaktır. Onaylamak için name anahtarını geekflare değişkeninden kaldırabilirsiniz.

Birden çok arayüzü aşağıdaki gibi genişletebiliriz.

 interface FirstHalf { name: string; } interface SecondHalf { age: number } interface Person extends FirstHalf, SecondHalf { profession: string } const person: Person = { name: 'Geekflare', age: 7, profession: 'Helping Techies' }

Eğlenmek için 2'den fazla arayüzle genişletmeyi deneyin. Arabirim ile tür takma adlarını da genişletebiliriz.

 type Site = { name: string; url: string; pagesCount: number; } interface Geekflare extends Site { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Yukarıdaki örnekte yalnızca bir türü genişlettik. Birden çok arabirimin genişletilmesine ilişkin önceki örneğe benzer şekilde, istediğiniz kadar genişletebilirsiniz.

Bunu tür takma adlarıyla nasıl yapacağımızı görelim.

Tür Takma Adları

TypeScript'te kesişim türünü kullanarak tür takma adlarını genişletebiliriz. Bir örnek görelim.

 type Site = { name: string; url: string; pagesCount: number; } type Geekflare = Site & { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Site türünü founder ile Geekflare türü için kesişimi (&) kullanarak genişlettik. Hata verecek olan geekflare değişkeninden anahtarlardan birini kaldırarak test edebilirsiniz.

Arayüzlere benzer şekilde, birden çok türü aşağıdaki gibi genişletebiliriz.

 type FirstHalf = { name: string; } type SecondHalf = { age: number } type Person = FirstHalf & SecondHalf & { profession: string } const person: Person = { name: 'Geekflare', age: 7, profession: 'Helping Techies' }

Arabirimleri, tür takma adlarını genişleten arabirimlerle aynı şekilde, tür takma adlarıyla da genişletebiliriz. Aşağıdaki örneği kontrol edin.

 interface Site { name: string; url: string; pagesCount: number; } type Geekflare = Site & { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Tür takma adları ve arabirimlerin kombinasyonunu genişletmeyi deneyin.

uygulama

Bu, arabirimler ve tür takma adları arasında bir fark değildir. Sadece class bilinmesi gereken bir özelliği.

Bir sınıf, hem arabirimi hem de takma adı aynı şekilde uygulayabilir. Her ikisi için de örnekler görelim.

Arayüzler

 interface Site { name: string; url: string; pagesCount: number; } class Geekflare implements Site { name = 'Geekflare' url = 'http://geekflare.com/' pagesCount = 25 constructor() { console.log(this.name, this.url, this.pagesCount) } }

Tür Takma Adları

 type Site = { name: string; url: string; pagesCount: number; } class Geekflare implements Site { name = 'Geekflare' url = 'http://geekflare.com/' pagesCount = 25 constructor() { console.log(this.name, this.url, this.pagesCount) } }

Not: Unutulmaması gereken bir şey, birleşim (|) veya kesişim (&) türlerini sınıflarla uygulayamayacağımızdır.

Son sözler

Yazılarda gördüğünüz gibi hem type aliases hem de interfaces ile her şeyi yapabiliyoruz. Dolayısıyla birinin diğerinden daha iyi olduğunu kesin olarak söyleyemeyiz. Sonunda, bunlardan birini seçmek kişinin kişisel seçimidir. Sonunda onları kullanma tarzınızı geliştireceksiniz.

Ardından, Typescript ve Javascript'i kontrol edebilirsiniz.

mutlu kodlama