REACT
React Projemizi JavaScript’ den TypeScript’ de Nasıl Dönüştürebiliriz ? -1
Burada amacım önceden Class Component kullanarak yazmış olduğumuz React projesini TypeScript dönüştürürken nelere dikkat etmemiz gerektiği üzerinde duracağım.
Daha öncesinde TypeScript ile React Projesi ortamı oluşturma adımlarını aşağıdaki blog post’ da yazmıştım.
Bu yazıda amacım ortam oluşturma olmadığı için dileyenler yukarıdaki yazıyı okuyarak ortamlarını hızlıca oluşturabilirler.
Sistemde 2 türde programlama dosyası bulunuyor .tsx ve .ts, bunlar adlardaki isim benzerliğinden de anlayabileceğiniz gibi .jsx ve .js dosyalarına karşılık geliyorlar. (Bu linkte dosyaların nasıl isimlendirileceği ile ilgili bir tartışma var, dileyen okuyabilir.)
Yani 1nci adım olarak;
Projenizde React kodları içeren dosya uzantılarını → .tsx sadece JavaScript kodları içeren kodları. → .ts uzantısına çevirerek başlayabiliriz.
Yani 2nci adım olarak;
Class(Sınıf) Component kendi yapılarına dışarıdan 2 tane object yapısı alırlar State ve Props bunlar için interface oluşturalım.
Varsayalım ki şu anda elimizde sadece App isimli bir bileşen bulusun ve bunun hiç bir state ve props değişkeni olmasın. Bunu aşağıdaki gibi tanımlayabiliriz.
Şimdi gelelim bunu bileşen tarafında tanımlamaya. Aşağıdaki gibi bir tanımda artık bileşenimiz bu interface ile çalışacak.
Any
Any TypeScript Type olmadan kullanabilmenizi sağlayan bir yapıdır. Eğer Props ve State geçecek şeyleri bilmiyorsanız Any kullanabilirsiniz.
class App_ extends React.Component<any, any>Veya Interface tanımlamaları içerisindeki property tanımlamalarında any kullanabilirsiniz.
interface AppProps{
prop1: any
}Not: Tabi uygulamanızı ilk defa dönüştürürken Type ’ları sonradan belirlemek amacı ile any bırakıp, bunları daha sonra ilgili türlere çevirebilirsiniz. String, Number, Boolean vb…
Any Durumunu Dönüştürme Zorlukları
Bazen bu any dönüştürme işlemi düşündüğümüzden daha zor olabilir. Genel bir kütüphane yazıyorsak. Bu diğer bileşenleri de içerecek ise daha genel kodlar yazmak için any halinde bırakabiliriz. Veya aşağıdaki withHover örneğinde olduğu gibi any → kısımlarına daha genel türler koymaya çalışabiliriz
Bu sınıfı neden Hooks veya başka bir yapı üzerinden anlatmadım derseniz. Code Sharing Örneklerinde Hover durumunu farklı yöntemler (Hooks, HoC, Inheritance, RenderProps) ile implement etmiştim. Bu blog postaki diğer örnekler üzerinden gidebilirsiniz.
WithHover React Bileşenin State Değişkenini Güncelleyelim.
Yukarıdaki örnekte en kolay withHover bileşenin tuttuğu state değiştirmektir. hovering isimli bir değişken oluşturup bileşen state alabileceği değişkeni tanımlıyoruz.
interface WithHoverState { hovering: boolean;}class WithHover extends React.Component<any, WithHoverState>
withHover fonksiyonu Comp: any Güncelleyelim.
withHover fonksiyonumuz herhangi bir React Bileşeni istiyor. Ama bu durumda boolean, string, func vb.. herhangi istemediğimiz bir türü bu fonksiyona geçebiliyoruz ve bu durum hata oluşturmuyor.
Bunu önlemek için React içerisinden ComponentType türünü import edip aşağıdaki şekilde kullanabiliriz.
import React, { ComponentType } from "react";export function withHover(Comp: ComponentType<any>) {
Kodu incelediğimizde ComponentType → 2 türde olabiliyor
type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;burada ComponentType<any> dememizin sebebi. Genel bir Hoc(High Order Component) türünde bir bileşen yazdığımız ve bu diğer React bileşenleri üzerinde çalışacak genel bir Component olduğu için burada any kelimesini kullanmak zorundayız.
WithHover React Bileşenin Props Değişkenini Güncelleyelim.
WithHover bileşenimizinde Props değişkenlerinin ne olacağını bilemiyoruz. Ama props T tipinde bir generic tanımlayıp props bu T türünde olmasını kodumuz içerisinde zorunlu hale getirebiliriz.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki(TypeScript) diğer yazılara erişmek için bu linke tıklayabilirsiniz.
