Higher-Order Components with Typescript
Merhaba arkadaşlar bugun React -dan duyduğumuz Higher-Order Component yapısını Typescript ile gerçekleştiricez. Bildiğiniz üzere HOF (higher order function) react komponentleri yapımında kod tekrarlarının karşısını ala bileceğimiz geriye komponent return eden function-lardır.
Geçenlerde bu konu hakkında internetde kısa bir araştırma yaptım fakat bu fazla elde tutulur bilgiler alamadım en esasda Typescript kullananlar için sorun yarata bileceyini düşünüyorum. Elimden geldiyi kadariyla açıklayıcı bir dille anlatmaya çalışacağım.
Şimdi kısaca ona gönderilen prop değerine göre servisden responsu bize döndürecek bir Higher Order Component yazalım.
Arkadaşlar bir az karışk gele bilik ilk başta şimdi açıklamaya çalısacağım. iPassedProp isimli interface bu komponenti kullanırken ona pass edeceyimiz prop için. iHOCProp ise aşağıda yazdığımız işlemin sonucunu komponentimize göndermek için kullanacağımız interface-dir.
withUser function-u parametre olarak bir React komponenti alıp geriye function içinde onu return eden bir function. withUser function için kullandığımız type-larda iHOCProp bir generic type gibi de düşüne biliriz.
Ben açıklayıcı ola bilmek adına yazdım siz onun yerine T ve b kullana bilirsiniz. Ardından bu function parametresi props olan bir function return ediyor. Komponenti kullanacağımız zaman ona pass yapacağımız prop — lara burdan ulaşa biliriz. Ve bu function en sonda parametre olarak aldığımız ilk komponenti geriye döndürüyor. Fakat burda bir olay daha var prop olarak pass yaptığımız data ( yani {…(props as iHOCProp)} ) komponenti kullanırken ona pass etdiğimiz prop-dur.
Artık komponentimizi kullana biliriz
Sanırım git gide olay açıklayıcı hale geliyor. Artik komponentimizi ana komponente import ede biliriz.
HOC kod yapınızı daha anlaşılır hale getirmeyi ve gereksiz kod tekrarlarından kurtulmanıza yardımcı olacaktır. Kendi ihtiyyaclarınıza göre tasarlaya bilirsiniz. Umarım açıklayıcı olmayı başara bildim. Kodda bir hata/yanlış gözünüze çarpıyorsa bana bildirirseniz sevinirim, birlikte düzeltiriz.
