REACT
React Projemizi JavaScript’ den TypeScript’ de Nasıl Dönüştürebiliriz ? -2
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.
İlk yazıda React için örnek bir projeyi alıp uygulamayı göstermiştim. Temelde yapmamız gereken bileşen için aşağıdaki yapılar için tanımlamarı belirlememiz gerekiyor.
- 1nci Adım: Props Interface Elemanlarının Type Yapısı
- 2nci Adım: State Interface Eleman larının Type Yapısı
- 3ncü Adım: ve Sınıf Bileşeni içerisindeki Fonksiyonların Type yapısı
- 4nci Adım: Fonksiyonların içerisindeki değişkenlerin Type yapısı
Mesela yukarıdaki örneği alalım. AppProps ve AppState bir interface olarak tanımlarsak bunun içerisinde özelliklerin tiplerini aşağıdaki gibi tanımlamamız gerekiyor.
interface AppProps {
prop1: number,
prop2: string,}interface AppState {
state1: number
state2: string
}
Peki bu tipler ne olabilir. Basic, Structure, Function, Interface, Tuples, vb.. bir çok tip olabilir. Bu tipleri tanımlama şekillerini aşağıda görebilirsiniz.
Basic: string, boolean, number, Structure: {}, string[], number[], Array<string>, new Map<string, any>, new Set<string>Function: function saySomething(msg:string)Function With Return: function sum(a: number, b:number) : number Async Function: async function getUsers():Promise<string[]>Spread Params:function logUsers(…users:string[])Any: const response: anyUnknown: const response: unknownInterface: interface User{username:string, age:number}Enumeration: enum Engine{ on, off, broken}Tuples: [number,(newValue:number)=>void]Type Alias: type matRow4x4=[number, number, number, number]Union Types: Color | PatternIntersection Types: AB && AA
Tabi bu kodda 2 kısmı çok etkiliyor. Artık bileşeni çağırdığımız yerlerde bu interface uygun props geçmemiz gerekiyor. Veya state içerisindeki değişkenlere bu tiplerde değerler atamamız ve fonksiyonları bu şekilde kullanmamız gerekiyor.
PropTypes göre React’da TypeScript kullanmanın söyle bir farkı oluyor. Normalde bir Web projesi tümüyle React bileşenlerinden oluşmuyor. Birde projenizi FullStack geliştiriyorsanız.
- Store
- Util
- Auth
- Network
- vb bir çok fonksiyon aslında bileşenlerin içerisinde yaşamıyor.
Yani bileşen dışında bir çok yapılar mevcut. Ama aşağıdaki göreceğiniz gibi PropTypes React Bileşenlerine özel kullanılabilecek şekilde geliştirilmiş.
React has some built-in typechecking abilities. To run typechecking on the props for a component
Herhangi bir dışarıda kullanacağınız fonksiyonda TypeScript kullanmanız, sizin tüm uygulamanızı Type kontrolleri altına almanızı sağlar. İster React bileşenleri içerisinde bir fonksiyon ister bunun ile ilgili olmayan bir fonksiyon olsun. Tüm bunlar için Type kontrolünü uygulamanıza getirebilirsiniz.
const generateSQL = (sqlResult: SQLResult): string => {Not:
Bir sonraki blog yazısında React yapısında bulunan React Kütüphanesinden React.Element, React.Node, React.Fragment, React.Component TypeScript ile birlikte nasıl ele alındığını anlatacağım.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki(TypeScript) diğer yazılara erişmek için bu linke tıklayabilirsiniz.
