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 geçişi keşfetmeye hazır halde görmek heyecan verici. JavaScript'ten TypeScript'e Ş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 hayal edin. TypeScript'in hayatınıza getirdiği huzur budur. undefined is not a function Bu kılavuzda TypeScript'i React projenize neden ve nasıl entegre edebileceğinizi ele alıyoruz. Çü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. Neden Tepki Vermelisiniz? İş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 Hello, {name} ; } TypeScript ile her zaman bir dize olarak ele alınmasını sağlayacak bir yol sunuyoruz: name // TypeScript style type Props = { name: string; }; function Greeting({ name }: Props) { return Hello, {name} ; } kısmına type Props dikkat ettiniz mi ? Bu TypeScript'in "Hey, izliyorum; 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. name 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 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. React 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 olması gerektiğini anlamak için muhtemelen işlevi derinlemesine incelemeniz veya nerede kullanıldığını bulmanız gerekir. TypeScript ile şunu hemen anlayabilirsiniz: items 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 Hello, {name}! ; } 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 ile arasındaki farkı öğrenin. type interface 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 = ({ name }) => { return Hello, {name}! ; } export default Greeting; Artık ne beklediğini açıkça belirtiyoruz, böylece bileşenimizi daha öngörülebilir ve üzerinde çalışılması daha kolay hale getiriyoruz. Farkı gör? Greeting 3. Düğüm ve NPM/İplik Paketlerimizi işlemek için veya 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? npm yarn # 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 değiştirilmesini içerir. .js .tsx 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 dosyalarını arar ve bunları olarak yeniden adlandırır. Bu, dosyalarınıza "TypeScript dünyasına hoş geldiniz!" demek gibidir. .js .tsx 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 {greeting}, world! ; } Ş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 = ({ greeting }) => { return {greeting}, world! ; } Burada ne yaptık? Bileşenimizin donanımlarını tanımlamak ve tür güvenliğini sağlamak için arayüzünü tanımladık. 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 türünü ( kısaltması) kullandık ve TypeScript'in bunun bir React bileşeni olduğunu bilmesini sağladık. MyComponentProps greeting FC Functional Component 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 ( You clicked {count} times

setCount(count + 1)}> Click me ); } Ü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 (0); useEffect(() => { document.title = `You clicked ${count} times`; }); return ( You clicked {count} times

setCount(prevCount => prevCount + 1)}> Click me ); } Yeniden düzenlenen bileşenimizde, TypeScript'e durumumuz için bir beklemesini açıkça söyledik. count number Bu ayrıntı, yanlışlıkla beklediğimiz sayı yerine bir dize, nesne veya Allah korusun ile sonuçlanabileceğimiz sinir bozucu hataları önler. null 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 ( {children} ); }; Ş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 (undefined); // Now, let's create a provider component export const DataProvider: FC = ({ children }) => { const [data, setData] = useState (null); // Again, consider replacing 'any' with your actual data type // The context provider now expects a value that matches 'DataContextState' return ( {children} ); }; Burada yaptığımız, bağlam verilerimizi kesin olarak yazan bir TypeScript arayüzü olan 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 işlevini ve bileşenini de yazdık. DataContextState createContext DataProvider 2. Yazılan İçeriği Kullanma Artık yazdığımıza göre, onu bir bileşen içinde nasıl kullanabileceğimizi görelim. DataContext kancasını kullanmamız gerekecek ve bu şu şekilde yapılıyor: useContext // 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 ( {JSON.stringify(data, null, 2)} Update Data ); }; bağlama erişiyoruz ve TypeScript'in değerin ile hizalandığını doğrulamasını bekliyoruz. işlevimiz, paylaşılan durumu nasıl güncelleyebileceğinizi gösterir; tüketen tüm bileşenler, çağrıldığında yeni verilerle yeniden oluşturulur. ComponentUsingContext DataContextState handleUpdateData DataContext setData 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 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. test yapmak 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. bileşenimiz şöyle görünebilir: UserGreeting // UserGreeting.tsx import React, { FC, useState, useEffect } from 'react'; interface UserGreetingProps { name: string; } const UserGreeting: FC = ({ 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 {greeting}, {name}! ); } 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( ); // 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: 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 eklenir. @types/ npm install @types/package-name Örneğin, kütüphanesini kullanıyorsanız şunu çalıştırırsınız: lodash npm install @types/lodash 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: Projenizin kaynak (veya ) dizininde uzantılı yeni bir dosya oluşturun. Bu, gibi bir şey olabilir. types .d.ts declarations.d.ts 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 ) { // function implementation } // Now you can pass only the parts of UserProfile you need to update updateProfile({ username: "newUserName" }); // This is valid , , ve diğer yardımcı program türleri inanılmaz derecede kullanışlı olabilir. Partial Readonly Pick 1.3 Bilinen Sabit Kümeleri için Numaralandırmaları Kullanın Yalnızca belirli değerleri alabilen bir özelliğiniz olduğunda, kullanmak, bu değerler üzerinde doğrulama sağlarken amacınızı netleştirebilir. enum 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 ve sıklıkla birbirinin yerine kullanılabilse de, nesnelerin veya sınıfların yapısını tanımlamak için kullanmak kodunuzu daha okunabilir hale getirir ve daha iyi hata mesajları sağlar. type interface interface interface UserProfile { username: string; email: string; // More properties... } 2. Yaygın Tuzaklar 2.1 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. any // 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 dosyalarını 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. .js .tsx Bitirirken işte birkaç çıkarım: : 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. Güvenlik Ağı : 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. Daha Net İletişim : 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. Güveni Yeniden Düzenleme : 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. Topluluk ve Ekosistem : 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. Öğrenme Eğrisi 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. : TypeScript'i keşfetmek için daha iyi bir yer yoktur. Çeşitli özelliklere ilişkin ayrıntılı belgeler, örnekler ve açıklamalarla doludur. TypeScript Resmi Belgeleri resmi web sitesinden : Üçüncü taraf kitaplıklarla çalışırken bir cankurtarandır. Yüksek kaliteli TypeScript türü tanımlarının devasa bir deposudur. KesinlikleTyped KesinlikleTyped : Bu kapsamlı , özellikle TypeScript'e geçiş yapan React geliştiricilerine yönelik olup ortak kalıpları ve uygulamaları kapsar. React TypeScript Hile Sayfası yardımcı sayfa : TypeScript'in ayrıntılı bir incelemesini sunan mükemmel bir çevrimiçi kitap. pratik senaryolara odaklanarak TypeScript'in en ince ayrıntılarını açıklıyor. TypeScript Deep Dive Deep Dive, : ziyaret ederek toplulukla etkileşime geçin ve TypeScript'teki en son gelişmelerden haberdar olun. TypeScript GitHub Deposu Resmi TypeScript GitHub deposunu 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. Yığın Taşması: Stack Overflow'taki TypeScript : Özel olarak seçilmiş bir bülten olan , en son makaleleri, ipuçlarını ve kaynakları doğrudan gelen kutunuza gönderir. TypeScript Weekly TypeScript Weekly : ve çeşitli Discord kanalları gibi platformlardaki topluluklar, TypeScript ile ilgili canlı tartışmalara, haberlere ve problem çözme konularına ev sahipliği yapar. Reddit ve Discord Kanalları Reddit'in r/typescript'i : TypeScript ekibinin duyuruları, ayrıntılı incelemeleri ve eğitimleri için göz atın. Resmi TypeScript Blogu resmi bloga : , ve gibi platformlar aracılığıyla etkileşimli öğrenme deneyimleri, uygulamalı TypeScript kursları sağlar. Çevrimiçi Kodlama Platformları Codecademy freeCodeCamp Scrimba 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!