Bir React Projesini JavaScript'ten TypeScript'e Taşıma

İçindekiler

• giriiş

• Neden Göç Etmelisiniz? Faydalarını Anlamak

• Başlamadan Önce: Önkoşullar

• Geçişi Başlatma: Projenizde TypeScript'i Ayarlama

• React Bileşenlerini Yeniden Düzenleme

• Durum Yönetimi ve Bağlam API'si

• Yönlendirme ve Zaman Uyumsuz İşlemler

• TypeScript'te test etme

• TypeScript Olmayan Paketleri İşleme

• En İyi Uygulamalar ve Yaygın Tuzaklar

• Çözüm

• Ek kaynaklar

giriiş

Merhaba geliştirici arkadaşlar! Sizi burada, React projelerimizde JavaScript'ten TypeScript'e geçişi keşfetmeye hazır halde görmek heyecan verici.

Şimdi, eğer JavaScript ile çalıştıysanız, bunun eski, rahat bir çift ayakkabıya benzediğini bilirsiniz; biraz yıpranmış, bazen ne yapacağı belli olmayan ama tanıdık. Ancak TypeScript, özel tabanlıklarla ayakkabınızı yükseltmeye benzer; aynı yürüme deneyimidir ancak ekstra destek içerir.

Peki TypeScript ile ilgili söylentiler neler?

Aslında bu JavaScript'tir, ancak iyi bir dozda ekstra yetenekler de eklenmiştir, en önemlisi tip kontrolüdür.

Bu sinir bozucu undefined is not a function hayal edin. TypeScript'in hayatınıza getirdiği huzur budur.

Bu kılavuzda TypeScript'i React projenize neden ve nasıl entegre edebileceğinizi ele alıyoruz.

Neden Tepki Vermelisiniz? Çünkü bu harika ve tabii ki onu seviyoruz. Ancak aynı zamanda React'ın bileşen tabanlı yaklaşımını TypeScript'in tür kontrol özellikleriyle birleştirmek ciddi anlamda verimli ve keyifli bir kodlama deneyimi sağlar.

İşte bir projeye TypeScript eklemenin nasıl göründüğüne dair kısa bir bakış. Tipik bir JavaScript bileşeninde şunlara sahip olursunuz:

 // JavaScript way function Greeting({ name }) { return <h1>Hello, {name}</h1>; }

TypeScript ile name her zaman bir dize olarak ele alınmasını sağlayacak bir yol sunuyoruz:

 // TypeScript style type Props = { name: string; }; function Greeting({ name }: Props) { return <h1>Hello, {name}</h1>; }

type Props kısmına dikkat ettiniz mi ?

Bu TypeScript'in "Hey, izliyorum; name bir dize olduğundan emin olsan iyi olur!" deme şeklidir. Bu, derin etkileri olan basit bir değişiklik. Artık türle ilgili hataları aktif olarak önleyen, kodunuzu daha sağlam ve öngörülebilir hale getiren bir koruyucu meleğiniz var.

Ama bu sadece küçük bir bakış. TypeScript'in bu kapsamlı kılavuzda açıklayacağımız pek çok faydası ve uygulaması var. Ortamınızı ayarlamaktan bileşenleri ve donanımları yeniden düzenlemeye ve hatta yaygın tuzaklardan kaçınmak için en iyi uygulamalara kadar ele almamız gereken çok şey var. O halde kemerlerinizi bağlayın ve bu gösteriyi yola koyalım!

Neden Göç Etmelisiniz? Faydalarını Anlamak

Özellikle React projelerinizde JavaScript'ten TypeScript'e geçiş yapmayı düşünüyorsanız, "Bu gerçekten uğraşmaya değer mi?" diye merak eden yalnız değilsiniz. Tüm bir projenin dilini dönüştürmek küçük bir başarı değildir; çaba, öğrenme ve başlangıçta biraz yavaşlamış üretkenlik gerektirir. Peki geliştiriciler neden geçiş yapıyor? Zorunlu nedenleri sıralayalım.

1. Hataları Daha Erken Yakalayın: Statik Tip Kontrolü

TypeScript'in temel özelliği statik tip sistemidir. Dinamik olarak yazılan JavaScript'in aksine TypeScript, değişkenleriniz, işlev parametreleriniz ve döndürülen değerleriniz için türleri belirtmenize olanak tanır. Avantajı nedir? Hatalar, geliştirme sırasında, kod üretime yaklaşmadan çok önce yakalanır.

Basit bir örnek düşünün:

 // In JavaScript function createGreeting(name) { return `Hello, ${name}`; } // You might not catch this typo until runtime const greeting = createGreeting(123); console.log(greeting); // "Hello, 123" - Wait, that's not right!

Şimdi TypeScript'in nasıl yardımcı olduğunu görelim:

 // In TypeScript function createGreeting(name: string): string { return `Hello, ${name}`; } // TypeScript will flag this immediately - '123' is not a string! const greeting = createGreeting(123);

TypeScript ile bu masum görünen hata anında yakalanır ve aksiliğin meydana geldiği anda farkında olmanızı sağlar. Bu şekilde, geri bildirim döngüsü kısaltılır ve üretim ortamınızdaki garip hatalara bakarken başınızı kaşımaktan kurtulursunuz.

2. Kod Kalitesini ve Anlaşılabilirliğini Artırın

TypeScript'in yazmayı zorunlu kılması, herhangi bir geliştiricinin (hatta gelecekteki sizin) bir fonksiyonun ne tür veri beklediğini ve ne döndürdüğünü bir bakışta anlayabileceği anlamına gelir. Bu netlik, kod tabanlarını daha okunaklı ve kendi kendini belgeleyen hale getirir.

Bir meslektaşınız tarafından yazılmış bir JavaScript işleviyle karşılaştığınızı hayal edin:

 function calculateTotal(items) { // ... complicated logic ... }

Hangi items olması gerektiğini anlamak için muhtemelen işlevi derinlemesine incelemeniz veya nerede kullanıldığını bulmanız gerekir. TypeScript ile şunu hemen anlayabilirsiniz:

 type Item = { price: number; quantity: number; }; // Now we know exactly what to expect! function calculateTotal(items: Item[]): number { // ... complicated logic ... }

3. Gelişmiş Düzenleyici Desteği

TypeScript, geliştirilmiş otomatik tamamlama, yeniden düzenleme ve hata ayıklama özellikleriyle metin düzenleyicileri ve IDE'leri geliştirerek geliştirici deneyimini yeni bir düzeye taşıyor. Bu entegrasyon mümkündür çünkü TypeScript kodunuza ilişkin anlayışını editörünüzle paylaşabilir.

Düzenleyicinizin yöntem adları önerdiğini, işlev parametre bilgisi sağladığını veya yanlış işlev kullanımı konusunda sizi uyardığını gördüğünüzde bu durumla karşılaşacaksınız. Bu, ekstra bir güvenlik katmanıyla kodda gezinmeye yardımcı olan bir yardımcı pilotun olması gibidir.

4. Daha Kolay İşbirliği

Bir ekip ortamında TypeScript, kod tabanında belirli standartların ve yapıların uygulanmasına yardımcı olarak parlar. Bir projeye birden fazla geliştirici katkıda bulunduğunda TypeScript'in katı kuralları herkesin aynı kodlama kurallarına uymasını sağlayarak işbirliğini daha sorunsuz hale getirir. Bu, her alanda 'kalite ve tutarlılığı' ifade eden ortak bir dildir.

5. Kodunuzu Geleceğe Hazırlama

JavaScript gelişiyor ve TypeScript en son özelliklere ayak uydurmayı hedefliyor. TypeScript'i kullanarak, yeni nesil JavaScript özelliklerinden genel kullanıma geçmeden önce yararlanmaya başlayabilir, projenizin modern ve son teknoloji kalmasını sağlayabilirsiniz.

Sonuç olarak, TypeScript'e geçiş yalnızca hataları daha erken yakalamakla ilgili değildir; kodlama sürecinizin bütünsel bir şekilde iyileştirilmesiyle ilgilidir. TypeScript, daha iyi ekip işbirliğinden projelerinizi geleceğe hazır hale getirmeye kadar güvenilir, ölçeklenebilir ve bakımı yapılabilir uygulamalar oluşturmak için sağlam bir temel sağlar.

Geçiş yapmak ilk başta göz korkutucu görünebilir, ancak yukarıda belirtilen avantajlarla birlikte TypeScript'in neden dünya çapındaki birçok geliştiricinin favorisi haline geldiği açıktır. Dalmaya hazır mısınız? Devam edelim!

Başlamadan Önce: Önkoşullar

Pekala, React projenizle TypeScript'e geçiş yapmaya hazır mısınız? Harika karar!

Ancak asıl sürece dalmadan önce birkaç şeyin yerinde olduğundan emin olmamız gerekiyor.

Bunu, geçiş sürecinin tereyağı kadar pürüzsüz olması için tüm araçlarımızı hazırladığımız hazırlık aşamamız olarak düşünün.

İşte hazır olmanız gerekenler:

1. Mevcut React Projesi

Öncelikle mevcut bir React projesine ihtiyacınız var. Bu proje, rahatça deneyebileceğiniz bir proje olmalıdır; Geçiş süreci oldukça basit olsa da, bunu geçici karışıklık yaratmanın sorun olmadığı bir alanda yapmak isteyeceksiniz.

 // Here's a simple React functional component in your project export default function Greeting({ name }) { return <h1>Hello, {name}!</h1>; }

Bu bileşen iyi bir başlangıç noktasıdır; işlevseldir, temizdir ve bir bakışta neler olup bittiğini görebiliriz.

2. TypeScript'in Temel Anlayışı

TypeScript uzmanı olmanıza gerek yok ama temelleri anlamak bu geçişi çok daha kolay hale getirecek.

Türleri, arayüzleri nasıl tanımlayacağınızı öğrenin ve type ile interface arasındaki farkı öğrenin.

Biraz ev ödevi çok işe yarar, güven bana.

 // A sneak peek into TypeScript syntax type Props = { name: string; // defining the 'name' expected to be a string }; // Your component in TypeScript would look like this import React, { FC } from 'react'; interface GreetingProps { name: string; } const Greeting: FC<GreetingProps> = ({ name }) => { return <h1>Hello, {name}!</h1>; } export default Greeting;

Farkı gör? Artık Greeting ne beklediğini açıkça belirtiyoruz, böylece bileşenimizi daha öngörülebilir ve üzerinde çalışılması daha kolay hale getiriyoruz.

3. Düğüm ve NPM/İplik

Paketlerimizi işlemek için npm veya yarn kullanacağımız için geliştirme ortamınızda Node.js kurulu olmalıdır. React ile çalıştığınız için bu gereklilik zorunludur ancak emin olmanın bir zararı olmaz, değil mi?

 # Check if Node is installed node --version # Check if npm is installed npm --version # Or for yarn yarn --version

Terminaliniz size bu araçların güncel sürümlerini göstererek hepsinin ayarlandığını ve kullanıma hazır olduğunu doğrulamalıdır.

4. Kod Düzenleyici

TypeScript'i iyi işleyebilecek bir kod düzenleyiciye ihtiyacınız olacak. Visual Studio Code, yerleşik güçlü TypeScript desteğine sahip olduğundan, akıllı kod tamamlama ve hata vurgulamayla geliştirme sürecini daha sorunsuz hale getirdiğinden kalabalığın favorisidir.

5. Sürüm Kontrolü

Bu adım zorunlu değildir ancak akıllıca bir adımdır. Mevcut projenizin git ile sürüm kontrolü altında olduğundan emin olun. Herhangi bir şey ters giderse (gerçi böyle olmamasını sağlamaya çalışacağız), uykunuzu kaybetmeden her zaman önceki bir sürüme dönebilirsiniz.

 # Check if git is installed git --version # If not, you need to initialize version control before proceeding git init git add . git commit -m "Pre-TypeScript commit"

Bu güvenlik ağına sahip olmak, sırtınızın korunduğunu bilerek güvenle denemeler yapabileceğiniz anlamına gelir.

Ön koşullarımız için bu kadar! Projeniz var, biraz TypeScript'i tazelediniz, ortamınız hazır ve güvenlik ağınız yerinde.

Artık hepimiz geçiş sürecine dalmaya hazırız. Haydi başlayalım!

Geçişi Başlatma: Projenizde React Bileşenlerini Yeniden Düzenlemede TypeScript'i Ayarlama

Pekala, bir sonraki aşamaya geçiyoruz!

TypeScript ile sahneyi hazırladık ama şimdi ellerimizi kirletmemiz gerekiyor.

React bileşenlerimizi yeniden düzenlemenin zamanı geldi. Bu adım, dosya uzantılarını değiştirmekten biraz daha fazlasını içerir; daha sağlam, hatasız bir kodlama deneyimi için TypeScript'in özelliklerinden yararlanmak amacıyla bileşen kodumuzu güncellememiz gerekiyor.

Hadi dalalım!

1. Dosya Uzantılarını Değiştirme

İlk önce bileşen dosyalarımızı yeniden adlandıralım. Bu işlem, JSX kodu içeren dosyalar için uzantının .js .tsx değiştirilmesini içerir.

Bunu projenizin kaynak dizininde komut satırından toplu olarak nasıl yapabileceğiniz aşağıda açıklanmıştır:

 # For Unix-like shells, navigate to your source folder and run: find . -name "*.js" -exec bash -c 'mv "$0" "${0%.js}.tsx"' {} \; # If you're using PowerShell (Windows), navigate to your source folder and run: Get-ChildItem -Filter *.js -Recurse | Rename-Item -NewName { $_.Name -replace '\.js$','.tsx' }

Bu komutlar, projenizin kaynak dizinindeki tüm .js dosyalarını arar ve bunları .tsx olarak yeniden adlandırır. Bu, dosyalarınıza "TypeScript dünyasına hoş geldiniz!" demek gibidir.

2. Bileşenlerinizi Yazmak

Dosyalarımız yeniden adlandırıldıktan sonra kodu ele alalım. JavaScript'te basit bir işlevsel bileşenle başlayacağız:

 // Before: MyComponent.js import React from 'react'; function MyComponent({ greeting }) { return <h1>{greeting}, world!</h1>; }

Şimdi bunu TypeScript'i kullanacak şekilde yeniden düzenleyelim:

 // After: MyComponent.tsx import React, { FC } from 'react'; // Define a type for the component props interface MyComponentProps { greeting: string; } // Use the 'FC' (Functional Component) generic from React, with our props type const MyComponent: FC<MyComponentProps> = ({ greeting }) => { return <h1>{greeting}, world!</h1>; }

Burada ne yaptık?

Bileşenimizin donanımlarını tanımlamak ve tür güvenliğini sağlamak için MyComponentProps arayüzünü tanımladık. greeting bir dize olduğunu söyleyerek TypeScript, örneğin bir sayı iletmeye çalıştığımızda bize bağıracaktır. Ayrıca React'ın tür tanımlarından FC türünü ( Functional Component kısaltması) kullandık ve TypeScript'in bunun bir React bileşeni olduğunu bilmesini sağladık.

3. useState ve useEffect'i Kesinlikle Yazmak

Fonksiyonel bileşenlerin ortak özellikleri olan durum ve efektlere türler ekleyerek bileşenlerimizi daha da geliştirelim.

İşte durumu ve etkisi olan bir bileşen:

 // Before: Counter.js import React, { useState, useEffect } from 'react'; function Counter() { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }

Üzerine biraz TypeScript büyüsü serpelim:

 // After: Counter.tsx import React, { useState, useEffect, FC } from 'react'; const Counter: FC = () => { // Declare the 'count' state variable with TypeScript const [count, setCount] = useState<number>(0); useEffect(() => { document.title = `You clicked ${count} times`; }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(prevCount => prevCount + 1)}> Click me </button> </div> ); }

Yeniden düzenlenen bileşenimizde, TypeScript'e count durumumuz için bir number beklemesini açıkça söyledik.

Bu ayrıntı, yanlışlıkla beklediğimiz sayı yerine bir dize, nesne veya Allah korusun null ile sonuçlanabileceğimiz sinir bozucu hataları önler.

Ve işte başlıyoruz!

React bileşenlerimizi TypeScript kullanacak şekilde başarıyla yeniden düzenledik. Bileşenlerimizi, durumlarımızı ve desteklerimizi açıkça yazarak daha öngörülebilir ve bakımı kolay bir kod tabanı oluşturuyoruz. Biz sadece kodlama yapmıyoruz; hak ettiği hassasiyetle bir başyapıt yaratıyoruz.

Şimdi daha karmaşık senaryoları ve TypeScript'in nasıl imdadımıza yetişeceğini daha derinlemesine inceleyeceğiz!

Durum Yönetimi ve Bağlam API'si

Şimdi TypeScript ile React'ta durum yönetiminin en ince ayrıntılarına girelim. Bir JavaScript projesinde Context API'yi kullandıysanız, bunun, her düzeyde donanımları manuel olarak iletmek zorunda kalmadan, bileşen ağacından veri aktarımı için güçlü bir özellik olduğunu bilirsiniz. TypeScript'te, bağlam verilerimizi daha da sağlam ve öngörülebilir hale getiren katı yazmanın ek avantajını elde ederiz.

Atlamaya hazır mısın? Hadi gidelim!

1. Yazılı Bir Bağlam Oluşturma

İlk olarak TypeScript ile yeni bir bağlam oluşturacağız. Bu bağlam, herhangi bir varsayılan değerin, sağlayıcı değerinin veya tüketici bileşeninin beklenen türümüzle eşleşmesini sağlayacaktır.

JavaScript'te temel bir bağlamı şu şekilde tanımlayabilirsiniz:

 // Before: DataContext.js import React, { createContext, useState } from 'react'; export const DataContext = createContext(); export const DataProvider = ({ children }) => { const [data, setData] = useState(null); return ( <DataContext.Provider value={{ data, setData }}> {children} </DataContext.Provider> ); };

Şimdi bu içeriği TypeScript kullanarak yazalım:

 // After: DataContext.tsx import React, { createContext, useState, FC, ReactNode } from 'react'; // First, we define a type for our context's state interface DataContextState { data: any; // Tip: Replace 'any' with the expected type of 'data' setData: (data: any) => void; // And here too, replace 'any' with the actual expected type } // We ensure our createContext() call is typed with the above interface export const DataContext = createContext<DataContextState | undefined>(undefined); // Now, let's create a provider component export const DataProvider: FC<{children: ReactNode}> = ({ children }) => { const [data, setData] = useState<any>(null); // Again, consider replacing 'any' with your actual data type // The context provider now expects a value that matches 'DataContextState' return ( <DataContext.Provider value={{ data, setData }}> {children} </DataContext.Provider> ); };

Burada yaptığımız, bağlam verilerimizi kesin olarak yazan bir TypeScript arayüzü olan DataContextState oluşturmaktır. Ayrıca durum değişkenlerinden bağlam değerlerine kadar her şeyin tanımlı türlerimizle uyumlu olmasını sağlamak için createContext işlevini ve DataProvider bileşenini de yazdık.

2. Yazılan İçeriği Kullanma

Artık DataContext yazdığımıza göre, onu bir bileşen içinde nasıl kullanabileceğimizi görelim.

useContext kancasını kullanmamız gerekecek ve bu şu şekilde yapılıyor:

 // ComponentUsingContext.tsx import React, { useContext, FC } from 'react'; import { DataContext } from './DataContext'; const ComponentUsingContext: FC = () => { // Here we're telling TypeScript to expect 'DataContextState' from our context const { data, setData } = useContext(DataContext) ?? {}; // This function would update the context state, triggering re-renders in consuming components const handleUpdateData = () => { const newData = { message: "Hello, TypeScript!" }; // This should match the structure of your data type setData(newData); }; return ( <div> <pre>{JSON.stringify(data, null, 2)}</pre> <button onClick={handleUpdateData}>Update Data</button> </div> ); };

ComponentUsingContext bağlama erişiyoruz ve TypeScript'in değerin DataContextState ile hizalandığını doğrulamasını bekliyoruz. handleUpdateData işlevimiz, paylaşılan durumu nasıl güncelleyebileceğinizi gösterir; DataContext tüketen tüm bileşenler, setData çağrıldığında yeni verilerle yeniden oluşturulur.

TypeScript'i Context API ile birlikte kullanarak, paylaşılan durum yönetimimizin uygulama genelinde tutarlı olduğuna dair güven kazanırız. Derleyici, bağlamımızın sağladığı ile bileşenlerimizin beklediği arasındaki tutarsızlıkları yakalar. Bu sinerji, kodumuzu daha güvenilir hale getirir ve geliştirme sürecimizi daha sorunsuz hale getirerek, aksi takdirde karşılaşabileceğimiz tüm hata kategorilerinden kaçınmamıza olanak tanır.

İyi çalışmaya devam edin ve unutmayın, biraz yazmak, daha sonra birçok hata ayıklama zahmetinden kurtarır!

TypeScript'te Yönlendirme ve Zaman Uyumsuz İşlem Testi >

Artık TypeScript'in React uygulamamızın çeşitli yönlerini nasıl geliştirdiğini gördüğümüze göre, başka bir kritik alandan bahsetmenin zamanı geldi: test etme.

Uygulamamızın beklendiği gibi çalışmasını sağlamak için test yapmak temeldir ve TypeScript, testlerimizi daha güvenilir ve verimli hale getirebilir. TypeScript'in özellikle bir React projesinde test etmede nasıl bir rol oynadığını inceleyelim.

1. Test için Ortamı Hazırlamak

Koda girmeden önce, bir React projesinde test etmek için gerekli kütüphanelerin kurulu olduğundan emin olun. React uygulamalarını test etmek için yaygın olarak birlikte kullanılan Jest ve React Testing Library ile hızlı bir kurulum:

 npm install --save-dev jest @types/jest @testing-library/react @testing-library/jest-dom

Bu kütüphaneler birim ve entegrasyon testleri yazmak için sağlam bir ortam sağlar. Şimdi netlik sağlamak için gerçek dünya senaryosunu ele alalım.

2. Gerçek Dünya Test Senaryosu: Kullanıcı Karşılama Bileşeni

Uygulamamızda kullanıcıları günün saatine göre karşılayan basit bir bileşenimiz olduğunu hayal edin. Kullanıcının adını destek olarak, geçerli zamanı ise durum olarak alan işlevsel bir bileşendir.

UserGreeting bileşenimiz şöyle görünebilir:

 // UserGreeting.tsx import React, { FC, useState, useEffect } from 'react'; interface UserGreetingProps { name: string; } const UserGreeting: FC<UserGreetingProps> = ({ name }) => { const [currentHour, setCurrentHour] = useState(new Date().getHours()); const [greeting, setGreeting] = useState(''); useEffect(() => { // Determine the time of day and set the appropriate greeting if (currentHour < 12) { setGreeting('Good morning'); } else if (currentHour < 18) { setGreeting('Good afternoon'); } else { setGreeting('Good evening'); } }, [currentHour]); return ( <div> <h1>{greeting}, {name}!</h1> </div> ); } export default UserGreeting;

Şimdi bileşenimizin farklı koşullar altında beklendiği gibi davrandığından emin olmak için testler yazmamız gerekiyor. Test durumlarımız, günün saatine göre uygun selamlamanın görüntülendiğini doğrulayacaktır.

Jest ve React Testing Library'yi kullanarak bu testleri şu şekilde yazabiliriz:

 // UserGreeting.test.tsx import React from 'react'; import { render, screen } from '@testing-library/react'; import UserGreeting from './UserGreeting'; describe('UserGreeting Component', () => { // Mock date for consistent testing const originalDate = Date; beforeAll(() => { const mockDate = new Date(2023, 10, 17, 14); // 2:00 PM global.Date = jest.fn(() => mockDate) as any; }); afterAll(() => { global.Date = originalDate; // Restore original Date object }); it('displays the correct greeting for the afternoon', () => { render(<UserGreeting name="Jordan" />); // Assert the greeting based on the mocked time of day expect(screen.getByText('Good afternoon, Jordan!')).toBeInTheDocument(); }); // Additional tests would repeat this process for other times of day, // ensuring our component behaves consistently. });

Bu komut dosyasında, bileşenimizi belirli bir zamanla (14:00 olarak taklit edilmiş) oluşturuyoruz ve beklendiği gibi "İyi günler" çıktısı verip vermediğini kontrol ediyoruz. Bileşenimizin tamamen kapsandığından emin olmak için günün diğer saatleri (sabah, akşam) için daha fazla test yazabiliriz.

TypeScript aracılığıyla testlerimizde bileşenlerimize aktardığımız propların beklenen türlerle eşleştiğinden emin oluyoruz. Bu şekilde, testlerimizde yanlış negatiflere yol açabilecek yanlış destek sorunlarıyla karşılaşmayı önleyerek testlerimizin sağlam ve güvenilir olmasını sağlıyoruz.

TypeScript'in test sırasında kullanılması, sorunların geliştirme sürecinin erken aşamalarında tespit edilmesine yardımcı olarak uygulamalarımızı daha sağlam ve bakımı kolay hale getirir. Bu bir kazan-kazan durumu! Tutarlı ve kapsamlı testlerin yüksek kaliteli yazılım geliştirmenin ayırt edici özelliği olduğunu unutmayın. Aynen böyle devam!

TypeScript Olmayan Paketleri İşleme

Pekala, bir React projesinde TypeScript'e geçerken insanların sıklıkla takılıp kaldığı bir alanı ele alalım: TypeScript'te yazılmamış JavaScript kitaplıkları ve paketleriyle uğraşmak. Bu yaygın bir senaryodur; TypeScript projenizi çalışır duruma getirdiniz ve ardından üçüncü taraf bir paket yüklediniz, ancak TypeScript derleyicinizin şikayetçi olduğunu gördünüz. Merak etme; çözümler var.

1. Sorunla Karşılaşmak

İşte tipik bir senaryo: Kutudan çıktığı gibi TypeScript desteği olmayan bir paket kullanmaya çalışıyorsunuz ve TypeScript derleyicisi "'modül adı' modülü için bir bildirim dosyası bulunamadı." gibi hatalar atmaya başlıyor. Tanıdık geliyor mu?

Bu sorun, TypeScript'in kitaplıkların ve paketlerin yapısını anlamak için tür tanımlarına dayanması nedeniyle ortaya çıkar. Bu tür tanımları eksikse TypeScript biraz kaybolur. Ancak korkmayın, bununla baş edecek stratejilerimiz var.

2. KesinlikleTyped'ı Kullanmak

Yapabileceğiniz ilk şeylerden biri, topluluğun paket için tür tanımlarını KesinlikleTyped aracılığıyla sağlayıp sağlamadığını kontrol etmektir. KesinlikleTyped, topluluk tarafından tutulan büyük bir tür tanımları deposudur.

KesinlikleTyped'ın türlerini şu şekilde kontrol edip kullanabilirsiniz:

1. Npm kullanarak yüklemeyi deneyerek paketiniz için tür tanımlarını arayın. KesinlikleTyped'daki tür tanımlarının önüne genellikle @types/ eklenir.

 npm install @types/package-name

Örneğin, lodash kütüphanesini kullanıyorsanız şunu çalıştırırsınız:

 npm install @types/lodash

2. Kurulumdan sonra türleri projenizin herhangi bir yerine açıkça aktarmanıza gerek yoktur. TypeScript bunları otomatik olarak algılayıp kullanacak, kitaplıkları her zamanki gibi içe aktarmanıza ve kullanmanıza, otomatik tamamlama ve tür kontrolüne sahip olmanıza olanak tanıyacak.

   
   

Peki ya KesinlikleTyped'da tür tanımı yoksa?

3. Kendi Beyan Dosyanızı Oluşturmak

KesinlikleTyped ihtiyacınız olan tür tanımlarına sahip değilse, özel bir bildirim dosyası oluşturmanın zamanı gelmiştir. Bu yaklaşım daha fazla çaba gerektirse de TypeScript projenizin JavaScript kitaplığıyla sorunsuz çalışmasını sağlar.

İşte yapabileceklerinizin basitleştirilmiş bir versiyonu:

1. Projenizin kaynak (veya types ) dizininde .d.ts uzantılı yeni bir dosya oluşturun. Bu, declarations.d.ts gibi bir şey olabilir.

   
   

2. Bu dosyada modülü bildirmek ve kütüphaneden beklediğiniz temel yapının ana hatlarını çizmek isteyeceksiniz. Örneğin:

 // This is a simplistic type declaration file for a hypothetical package. // We declare the module so TypeScript recognizes it. declare module 'name-of-untyped-package' { // Below, we're declaring a very basic structure. It's saying // there's a function we're expecting to exist, which returns any. // Ideally, you'd want to flesh this out with more specific types // if you know them or as you learn more about the library. export function functionName(arg: any): any; // You can continue to define the shapes of other functions or variables // you expect to exist within the package. The more detailed you are here, // the more helpful your type checking will be. }

Bu ev yapımı bildirim dosyası, tam bir tür tanımları kümesi kadar kapsamlı olmayacaktır, ancak TypeScript'e şunu söyler: "Güven bana, bu modülün var olduğunu biliyorum ve bu işlevleri/değişkenleri sağlıyor." Buradan gerektiğinde daha ayrıntılı tanımlar oluşturabilirsiniz.

TypeScript olmayan paketlerle uğraşmanın biraz engel olabileceğini unutmayın, ancak bu stratejiler TypeScript projenizin sağlam kalmasını ve aradığımız tür güvenliği ve öngörülebilirliğinden yararlanmasını sağlar. Her şey kod tabanınıza olan güven ile ilgili!

En İyi Uygulamalar ve Yaygın Tuzaklar

React projenizde TypeScript'e geçmek yalnızca dosya uzantılarını değiştirmek ve tür açıklamaları eklemekle ilgili değildir. Aynı zamanda, sık karşılaşılan engellerden kaçınırken TypeScript'in sunduğu şeylerden en iyi şekilde yararlanmak için zihniyetinizi ve geliştirme uygulamalarınızı uyarlamakla da ilgilidir. Bu yolculuk sırasında karşılaşabileceğiniz bazı en iyi uygulamaları ve yaygın tuzakları tartışalım.

1. En İyi Uygulamalar

1.1 Tür Çıkarımına Yalın

Her şeye açıklama eklemek cazip gelse de TypeScript'in güçlü yönlerinden biri tür çıkarımıdır. Kodunuzun her parçasına açık türler eklemek genellikle gereksizdir.

 // Instead of this: let x: number = 0; // You can rely on type inference: let x = 0; // TypeScript knows this is a number

Aşırı açıklama eklemek, kodunuzu değer katmadan ayrıntılı hale getirebilir. Türleri çıkarabildiği yerde TypeScript'e güvenin.

1.2 Fayda Türlerini Benimseyin

Yardımcı program türleri, çeşitli senaryolardaki türleri işlemek için esnek yollar sağlar. Bunlar size çok fazla çaba tasarrufu sağlayabilir ve yazı tipi kullanımınızı daha verimli hale getirebilir.

 // Example of using Partial to make all properties in an object optional function updateProfile(data: Partial<UserProfile>) { // function implementation } // Now you can pass only the parts of UserProfile you need to update updateProfile({ username: "newUserName" }); // This is valid

Partial , Readonly , Pick ve diğer yardımcı program türleri inanılmaz derecede kullanışlı olabilir.

1.3 Bilinen Sabit Kümeleri için Numaralandırmaları Kullanın

Yalnızca belirli değerleri alabilen bir özelliğiniz olduğunda, enum kullanmak, bu değerler üzerinde doğrulama sağlarken amacınızı netleştirebilir.

 enum UserRole { Admin = 'ADMIN', User = 'USER', Guest = 'GUEST', } // Now UserRole can only be one of the values defined in the enum function assignRole(role: UserRole) { // function implementation }

1.4 Nesne Yapısı Tanımı için Arayüzleri Tercih Edin

type ve interface sıklıkla birbirinin yerine kullanılabilse de, nesnelerin veya sınıfların yapısını tanımlamak için interface kullanmak kodunuzu daha okunabilir hale getirir ve daha iyi hata mesajları sağlar.

 interface UserProfile { username: string; email: string; // More properties... }

2. Yaygın Tuzaklar

2.1 any aşırı kullanımı

any kullanılması, tür denetimini atlayarak TypeScript'in faydalarını ortadan kaldırır. Hızlı bir düzeltme gibi görünse de kodunuzu daha az güvenli ve öngörülebilir hale getirir.

 // Try to avoid this: let userData: any = fetchData(); // Instead, define a type for the data you expect: let userData: UserProfile = fetchData();

2.2 Derleyici Uyarılarının Göz Ardı Edilmesi

TypeScript'in derleyici uyarıları size yardımcı olmak için var. Bunları göz ardı etmek, TypeScript kullanarak kaçınmaya çalıştığınız türde hatalara ve sorunlara yol açabilir.

2.3 Karmaşık Türlerin İçinde Kaybolmak

Bazen geliştiriciler, türleri kesin hale getirmek amacıyla anlaşılması ve sürdürülmesi zor olan inanılmaz derecede karmaşık tür tanımları oluştururlar. Türleriniz karmaşıklaşıyorsa kodunuzu basitleştirmenin veya yeniden düzenlemenin zamanı gelmiş olabilir.

2.4 Üçüncü Taraf Kitaplık Türlerini Unutma

Üçüncü taraf kitaplıkları kullanıyorsanız, KesinlikleTyped'da mevcut TypeScript türlerinin olup olmadığını her zaman kontrol edin. Bunu yapmamak, bu kitaplıkların tür güvenliği özelliklerini kaçırmak anlamına gelebilir.

Sonuç olarak TypeScript'i benimsemek, yeni bir sözdizimi kullanmaktan daha fazlasıdır; hataları önlemeye, kodu daha okunaklı hale getirmeye ve bakımı iyileştirmeye yardımcı olan yeni uygulamaların benimsenmesiyle ilgilidir. Yaygın tuzaklardan kaçının ve amacın daha temiz, daha güvenilir ve daha bakımı kolay kod yazmak olduğunu unutmayın!

Çözüm

Evet arkadaşlar, TypeScript geçiş yolculuğumuzun sonuna ulaştık. Oldukça uzun bir yolculuktu, değil mi? Büyük "neden" sorusuyla başladık ve bir React projesini JavaScript'ten TypeScript'e geçirmenin esasına indik. TypeScript ortamınızı kurmaktan bileşenleri yeniden düzenlemeye, durumları yönetmeye, rotaları yönetmeye ve hatta sinir bozucu TypeScript olmayan paketlerle ilgilenmeye kadar pek çok yol kat ettik.

Bu yolculuğa bakıldığında, TypeScript'e geçişin yalnızca .js dosyalarını .tsx ile 'arama ve değiştirme'den ibaret olmadığı açıktır. Bu, yeni kuralları öğrenmeyi, türleri derinlemesine anlamayı ve en önemlisi kodumuzun güvenilirliği ve tutarlılığı hakkındaki düşüncelerimizi değiştirmeyi içeren stratejik bir hamledir.

Bitirirken işte birkaç çıkarım:

1. Güvenlik Ağı : TypeScript, projemize, hataları çalışma zamanına zarar vermeden önce yakalayan bir güvenlik katmanı ekledi. Bu güvenlik ağı, bir kez alıştığınızda, kodunuza olan güven ve genel geliştirme hızı açısından oyunun kurallarını değiştirir.

   
   

2. Daha Net İletişim : Türler sayesinde kodumuz artık daha açık bir şekilde iletişim kuruyor. İster kodunuzu yeniden ziyaret ediyor olun, ister bileşen yapılarınızı anlamaya çalışan yeni bir ekip üyesi olun, TypeScript ek bir dokümantasyon katmanı görevi görür.

   
   

3. Güveni Yeniden Düzenleme : Yeniden düzenlemeden korktunuz mu? TypeScript arkanda. Kodunuzdaki sözleşmeleri sağlayan türler sayesinde, yeniden düzenleme aşamalarında birçok potansiyel hata yakalanır ve bu da süreci daha az göz korkutucu hale getirir.

   
   

4. Topluluk ve Ekosistem : TypeScript'i benimsemek gelişen bir ekosistemin kapılarını açar. KesinlikleTyped'daki yazılan kitaplıklardan topluluk forumlarındaki sonsuz desteğe ve daha akıcı üçüncü taraf paket entegrasyonuna kadar, iyi bir arkadaşsınız.

   
   

5. Öğrenme Eğrisi : Evet, TypeScript bir öğrenme eğrisi sunar. Muhtemelen hayal kırıklığı anları, türler ve arayüzler konusunda kafa karışıklığı veya derleyiciyle güreşme anları yaşandı. Ancak yolculuğunuza dönüp baktığınızda kodunuzu ve davranışını artık ne kadar daha iyi anladığınızı göreceksiniz.

   
   

TypeScript'e geçişin bir sürat koşusu olmadığını unutmayın; bu bir maraton. Başlangıçta birkaç engel olabilir, ancak kod kalitesi, öngörülebilirlik ve sürdürülebilirlik açısından uzun vadeli kazanımlar çabaya değer.

Geliştirme yolculuğunuza devam ederken TypeScript ile keşfetmeye, öğrenmeye ve deneyimlerinizi paylaşmaya devam edin. Her zorluk öğrenme fırsatıdır. Gelecekteki benliğiniz (ve ekibiniz), bugün geliştirmekte olduğunuz sağlam, tür açısından güvenli ve bakımı çok daha kolay olan kod tabanınız için size teşekkür edecektir.

React ile TypeScript'in bu keşfine bana katıldığınız için teşekkür ederim. Kodlamaya devam edin, gelişmeye devam edin ve en önemlisi sürecin tadını çıkarın!

Bağlı kalın

Bu makaleyi beğendiyseniz ve web geliştirme hakkında daha fazla bilgi edinmek istiyorsanız çeşitli platformlarda benimle bağlantı kurmaktan çekinmeyin:

geliştirme

hackernoon.com

hashnode.com

twitter.com

Geri bildiriminiz ve sorularınız her zaman memnuniyetle karşılanacaktır.

Öğrenmeye, kodlamaya ve harika web uygulamaları oluşturmaya devam edin.

Mutlu kodlama!

Ek kaynaklar

Rehberimiz sona ermiş olsa da TypeScript maceranız burada bitmiyor. TypeScript dünyası çok geniştir; keşfedilecek, öğrenilecek ve katkıda bulunulacak çok sayıda kaynak vardır. Aşağıda, anlayışınızı güçlendirmenize ve TypeScript topluluğunda güncel kalmanıza yardımcı olabilecek bazı değerli kaynaklar bulunmaktadır.

1. TypeScript Resmi Belgeleri : TypeScript'i keşfetmek için resmi web sitesinden daha iyi bir yer yoktur. Çeşitli özelliklere ilişkin ayrıntılı belgeler, örnekler ve açıklamalarla doludur.

   
   

2. KesinlikleTyped : Üçüncü taraf kitaplıklarla çalışırken KesinlikleTyped bir cankurtarandır. Yüksek kaliteli TypeScript türü tanımlarının devasa bir deposudur.

   
   

3. React TypeScript Hile Sayfası : Bu kapsamlı yardımcı sayfa , özellikle TypeScript'e geçiş yapan React geliştiricilerine yönelik olup ortak kalıpları ve uygulamaları kapsar.

   
   

4. TypeScript Deep Dive : TypeScript'in ayrıntılı bir incelemesini sunan mükemmel bir çevrimiçi kitap. Deep Dive, pratik senaryolara odaklanarak TypeScript'in en ince ayrıntılarını açıklıyor.

   
   

5. TypeScript GitHub Deposu : Resmi TypeScript GitHub deposunu ziyaret ederek toplulukla etkileşime geçin ve TypeScript'teki en son gelişmelerden haberdar olun.

   
   

6. Yığın Taşması: Stack Overflow'taki TypeScript etiketi, dünya çapındaki geliştiricilerin karşılaştığı yaygın (ve nadir) sorguların ve incelikli kullanım durumlarının merkezidir. Pratik içgörülerle dolu bir altın madeni.

   
   

7. TypeScript Weekly : Özel olarak seçilmiş bir bülten olan TypeScript Weekly , en son makaleleri, ipuçlarını ve kaynakları doğrudan gelen kutunuza gönderir.

   
   

8. Reddit ve Discord Kanalları : Reddit'in r/typescript'i ve çeşitli Discord kanalları gibi platformlardaki topluluklar, TypeScript ile ilgili canlı tartışmalara, haberlere ve problem çözme konularına ev sahipliği yapar.

   
   

9. Resmi TypeScript Blogu : TypeScript ekibinin duyuruları, ayrıntılı incelemeleri ve eğitimleri için resmi bloga göz atın.

   
   

10. Çevrimiçi Kodlama Platformları : Codecademy , freeCodeCamp ve Scrimba gibi platformlar aracılığıyla etkileşimli öğrenme deneyimleri, uygulamalı TypeScript kursları sağlar.

    
    

Unutmayın, topluluklar katılımla gelişir. Soru sormaktan, yanıtlara katkıda bulunmaktan veya çözümlerinizi ve deneyimlerinizi paylaşmaktan çekinmeyin. Topluluk forumlarının kolektif bilgeliği, resmi belgeler ve sürekli uygulamalar sizi TypeScript uzmanlığına doğru yönlendirecektir.

Mutlu kodlama!