TypeScript’te Jenerikler – JSManifest

TypeScript'te Jenerikler – JSManifest

JavaScript’i bir süredir öğreniyorsanız ve hiç uygulama deneyiminiz olmadıysa TypeScript, TypeScript’i mümkün olan en kısa sürede kullanmaya başlamanızı ve uygulamalarınızı geliştirmek için kullanmaya başlamak isteyip istemediğinize bakmanızı şiddetle tavsiye ederim. TypeScript’i geliştirme akışınıza entegre etmek, daha iyi kod yazmak ve hataların oluşmasını önlemek gibi büyük faydalar sağlayacaktır. önceki hatta meydana gelme şansına sahip olurlar.

ve eğer varsa olmuştur TypeScript kullanarak bulabilirsin jenerik özellikle TypeScript’te yeniyseniz kafa karıştırıcı bir kavram olmak. Ancak, onlar hakkında biraz daha fazla bilgi sahibi olduktan sonra, aslında anlamanın o kadar da zor olmadığını anlayacaksınız.

Bu gönderi, TypeScript’teki jenerikleri gözden geçirmeyi ve ne oldukları, nasıl çalıştıkları ve neden onlara ihtiyacımız olduğu hakkında konuşmayı amaçlıyor.

jenerik

TypeScript’te jenerikleri kişisel olarak uygulamak ve kullanmak hem zorlayıcı hem de eğlencelidir. Yazıldığında kolayca oldukça karmaşık hissedebilirler, ancak programınızın tür güvenliğini güçlendiren koddan koda doğru bir şekilde uygulandığında, normalde yapmayacağınız şeyleri kodda daha rahat hissetmenizi sağlar. yapmadı kodunuzun güvenliğini sağlamak için TypeScript’e sahip olun.

Onlar neler?

Günümüzde modern uygulamalardaki en güçlü kavramlardan biri, yazılımdaki yeniden kullanılabilir bileşenler kavramıdır. Bu “bileşenler” genellikle bir kullanıcı arayüzünün parçaları bağlamında kullanılır, ancak insanlar bu terimi aşağıdaki gibi başka şeyler için birbirinin yerine kullanırlar. fonksiyonlar veya sayfadaki modüller.

Bir şey yeniden kullanılabiliyorsa, birden fazla amaç için veya birden fazla durum için kullanılabilecekleri anlamına gelir.

Neden? Niye?

Jenerik tamamen olabilir Faydasız onları kullanmazsan (peki, hayır ah). Ancak kullanıldıklarında yalnızca tür güvenliğini sağlamakla kalmazlar, aynı zamanda daha iyi kararlar vermenize ve örneğin tür işlevlerini nasıl kullanabileceğiniz konusunda daha fazla fikir vermenize olanak tanırlar.

Nasıl çalışırlar?

Peki bize nasıl yardımcı oluyorlar ve neden bunlarla bir ilgileri var? “tekrar kullanılabilirler”?

Diyelim ki, çağrıldığında çağıran bir işlev oluşturuyorsunuz. typeof argüman üzerinde ve argümanı döndürür. Tamamen işe yaramaz ama mesele bu değil.

TypeScript ile yazıldığında bunun nasıl görünebileceğini görelim:

function logAndReturnIt(
  valueThatIsGoingToBeLoggedAndReturnedFromAUselessFunction: string,
): string {
  console.log(typeof valueThatIsGoingToBeLoggedAndReturnedFromAUselessFunction)
  return valueThatIsGoingToBeLoggedAndReturnedFromAUselessFunction
}

Bu işlevin ne kadar yararsız olmasına rağmen, bir tür yerleştirdiğini görebiliriz. string argüman üzerinde. Artık TypeScript kullanırken bu işlevle herhangi bir tür dize kullanma seçeneğiniz var:

const greeting = 'Good morning'

logAndReturnIt(greeting) 
logAndReturnIt('cat') 

Başka bir veri türünü desteklemesini sağlayacak olsaydık, kodu şu şekilde değiştirmemiz gerekirdi:

function logAndReturnIt(
  valueThatIsGoingToBeLoggedAndReturnedFromAUselessFunction: null,
): null {
  console.log(typeof valueThatIsGoingToBeLoggedAndReturnedFromAUselessFunction)
  return valueThatIsGoingToBeLoggedAndReturnedFromAUselessFunction
}

logAndReturnIt(null) 

logAndReturnIt(5) 

Pratikte, uygulamalar geliştirdiğimizde ve bu işlevi kullandığımızda, onu yalnızca null.

Bu, işlevin yeniden kullanılabilir olmadığı anlamına gelir. Öyleyse bu işlevi daha fazla yeniden kullanılabilir hale getirelim ve bunu yapmak için birkaç seçeneğimiz var.

İlk seçenek, any TypeScript’i ilk öğrenirken hepimizin kullanmayı sevdiğimiz yazın:

function logAndReturnIt(
  valueThatIsGoingToBeLoggedAndReturnedFromAUselessFunction: any,
): any {
  console.log(typeof valueThatIsGoingToBeLoggedAndReturnedFromAUselessFunction)
  return valueThatIsGoingToBeLoggedAndReturnedFromAUselessFunction
}

logAndReturnIt(null) 
logAndReturnIt(5) 
logAndReturnIt('abc123') 
logAndReturnIt(undefined) 
logAndReturnIt(false) 

Kullanmak any type bize birlikte çalışma yeteneği verdi hiç hedefimize ulaşmamıza yardımcı olan veri türü. Bu yaklaşımla ilgili uyarı, aslında kayıp faydaları tip güvenlik. Bunun anlamı, bir hata örneği gibi garip değerler geçsek bile, hâlâ derleyici için uygun kabul edilir çünkü TypeScript size karşı sorumluluğu üstlenir.

İşlevi güçlü bir şekilde yazmanın daha güçlü bir yolu var, bu da onları güvenli ve yeniden kullanılabilir hale getiriyor. Yapabilirsiniz bildirmek yeni genel bunun yerine şunu yazın ve kullanın, şöyle:

function logAndReturnIt<T>(
  valueThatIsGoingToBeLoggedAndReturnedFromAUselessFunction: T,
): T {
  console.log(typeof valueThatIsGoingToBeLoggedAndReturnedFromAUselessFunction)
  return valueThatIsGoingToBeLoggedAndReturnedFromAUselessFunction
}

Sözdizimi biraz tuhaf ve göz korkutucu görünebilir ama aslında anlaşılması çok kolay. JavaScript’te değişkenler bildirebilir ve bunları daha sonra şu şekilde kullanabilirsiniz:

let fruit = 'apple'

function sayStuff(stuff) {
  window.alert(stuff)
}

sayStuff(`i love eating ${fruit}s`) 

sayStuff < number > 500 

Tip bildirimi örneğimizde, kavram aslında şudur: birebir aynı. Genel bir tür ilan ettik T ilk parantezden hemen önce bulunan oklar içine alarak:

vscode'da asasd sonucu

Artık işlev kullanıldığında, herhangi bir yanlışlık için TypeScript linter tarafından korunurken işlevi yeniden kullanmanın daha iyi bir yolunu elde ettiğimizi görebilirsiniz.

Ayrıca, tıpkı normal JavaScript işlevlerinde olduğu gibi, istediğiniz kadar çok tür bildirebilirsiniz (JavaScript işlevlerinin bağımsız değişkenlerinde olduğu gibi), böylece yalnızca bir tür bildirimiyle sınırlı değilsiniz:

function combine<T, W>(arg1: W, arg2: T): T {
  return arg2
}

TypeScript derleyiciniz, hangi türe geçerseniz geçirin arg2 dönüş türü şu şekilde ayarlanacaktır:

typescript jenerik tür çıkarım değeri dönüş değeri

Bu nedenle, doğrudan türü açıkça şu şekilde bildirmek yerine:

function combine(arg1: string, arg2: string): string {
  return arg2
}

Bunu yalnızca dizelerle çalışmak için kullanmakla sınırlısınız:

vscode kısıtlı dize türü bildirimi

TypeScript’in sizi kontrol altında tutmasına izin verirken işlevleri yeniden kullanma

Daha genel olan yol, işlevleri yeniden kullanmada daha iyidir çünkü içine ilettiğiniz türü yakalayabilir ve TypeScript’in daha sonra bunları kullanırken sizi her zaman kontrol altında tutmanıza yardımcı olmasına izin verebilirsiniz. çalışmak için işleve ne verdiğinize bağlı olarak.

Jeneriklerin gerçekten çok daha kullanışlı hale geldiği yer burasıdır. İnsanların TypeScript hakkında konuştuğunu ve bunun “hatalar meydana gelmeden önce oluşturmaktan kaçınmanıza” nasıl yardımcı olduğunu duyduğunuzu biliyor musunuz? Bu doğrudur ve jenerik ilaçları kullanmak bunu gerçekten iyi kanıtlamanın bir yoludur:

function something<T, K extends keyof T>(arg1: T, arg2: K) {
  
}

Diyelim ki bu fonksiyonla çalışmak istiyoruz. tipini bildirdiğini görüyoruz. T ve yazın K Bu bir tip anahtarı T. tip atadık T ile arg1ve yazın K ile arg2.

Artık biliyoruz ki, bu işlevi kullandığımızda, ilk argüman büyük olasılıkla bir tür dizin veya özellik tarafından erişilebilen bir tür olacak, ikinci argüman ise bir tür dize veya sayı olabilir. Bunu biliyoruz çünkü K extends keyof T anlamına gelir K bir özellik/dizin/anahtardır T.

Bu işlevi şu şekilde kullanabiliriz:


const result = something({ goodwill: 'a' }, 'goodwill')

Dan beri goodwill ilk argümana iletilen nesnenin bir özelliğidir, tamamen geçerlidir. Ona gibi güçlü bir tip nesne verdik { goodwill: string } birlikte çalışmak.

TypeScript, onu yanlış kullanmaya çalışırsak bizi kontrol altında tutar:

const result = something({ goodwill: 'a' }, 'toString')

jenerik tipte jenerik yanlış kullanım

Bu, bizi böceklerden koruduğu için inanılmaz derecede güçlüdür. önceki hatta gerçekleşme şansı bile var!

Fonksiyonu birkaç şekilde yeniden kullanabileceğimizi kanıtlamak için tip güvenliğine tutunurkenişte birkaç örnek daha:





const result = something('hello', 50)

const result = something('hello', '50')

Sınıfları olan jenerikler

Genel türler, işlevlere uygulanabilir, ancak sınıflarla da yapılabilir – bu, özellikle kodunuzun tüketicileri için gerçekten yararlıdır.

type gibi türleri bildirebilirsiniz <T> fonksiyonlarla nasıl yapabildiğimiz gibi. Ancak, sözdizimi farklı olduğu için biraz farklı görünüyor:

class SomeElement<T> {
  private element: T

  constructor(element: T) {
    this.element = element
  }

  getElement() {
    return this.element
  }
}

const elem = document.createElement('button')

const button = new SomeElement<HTMLButtonElement>(elem)

kullandığınızda button örneği başlattıktan sonra TypeScript, güvenli olduğunu her zaman hatırlayarak element mülk bir düğme öğesibu nedenle yalnızca bir düğmenin nitelikleri, yöntemleri, özellikleri vb. ile sınırlandırılmalıdır.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.