memindahkan projek React yang sedia ada kepada TypeScript: Panduan Langkah demi Langkah

Apabila anda belajar jenis pertama, anda sering mendengar cadangan: "Tukar projek yang ada! Ini adalah cara terbaik untuk belajar!" Migrasi aplikasi React ke TypeScript.

Artikel ini bertujuan untuk menjadi rakan anda dan membantu anda memindahkan projek anda ke TypeScript. Untuk menggambarkan, saya akan menggunakan beberapa serpihan dari projek peribadi saya yang saya berhijrah semasa proses penghijrahan.

mata utama

Mula Memindahkan Aplikasi React ke TypeScript dengan menambah TypeScript ke projek, menambah tsconfig.json, bermula dengan kesederhanaan, menukar semua fail, meningkatkan ketegangan, membersihkan dan meraikan migrasi yang berjaya.
Langkah dengan mengadopsi TypeScript, bermula dengan komponen mudah. Tukar pelanjutan fail ke .tsx dan tambahkan komen jenis. Tukar semua fail dalam langkah projek demi langkah.
Meningkatkan ketat tsconfig.json dengan membolehkan peraturan yang lebih ketat. Ini boleh dilakukan langkah demi langkah, membetulkannya apabila kesilapan berlaku. Matlamatnya adalah untuk bergerak ke hadapan dengan cepat dan kembali kemudian untuk menyelesaikan sebarang masalah.
Gunakan pintasan seperti @ts-ignore dan fixmelater untuk melegakan beban semasa proses penghijrahan. Dari masa ke masa, mengutamakan menggantikan jalan pintas ini dengan keselamatan jenis yang betul.

Plan

Untuk membuat proses ini kurang menakutkan, kami akan memecahkannya ke langkah -langkah supaya anda dapat melakukan penghijrahan dalam ketulan. Saya sentiasa mendapat bantuan ini apabila berurusan dengan tugas -tugas yang besar. Berikut adalah semua langkah yang akan kami ambil untuk memindahkan projek kami:

Tambah TypeScript
Tambah tsconfig.json
Mulakan dengan kesederhanaan
Tukar semua fail
Meningkatkan ketat
Pembersihan
Raikan

Nota: Langkah yang paling penting dalam keseluruhan proses adalah langkah 7. Walaupun kita hanya dapat menyelesaikan langkah -langkah ini untuk sampai ke sana.

1.

Pertama, kita perlu menambah typescript ke projek kami. Dengan mengandaikan projek REACT anda dipasang dengan create-react-app, kami boleh menjalankannya mengikut dokumen:

atau jika anda menggunakan benang:

<code>npm install --save typescript @types/node @types/react @types/react-dom @types/jest</code>

Sila ambil perhatian bahawa kami belum mengubah apa -apa kepada TypeScript lagi. Jika kita menjalankan arahan untuk memulakan projek secara tempatan (benang bermula dalam kes saya), tiada perubahan. Jika ini berlaku, itu akan menjadi hebat! Kami bersedia untuk bergerak ke langkah seterusnya.

<code>yarn add typescript @types/node @types/react @types/react-dom @types/jest</code>

2

Sebelum kita boleh memanfaatkan jenis, kita perlu mengkonfigurasinya melalui tsconfig.json. Cara yang mudah kita mulakan ialah membina satu menggunakan arahan berikut:

Ini memberi kita pengetahuan asas.

Kami belum berinteraksi dengan TypeScript lagi. Kami hanya mengambil langkah -langkah yang diperlukan untuk disediakan. Langkah seterusnya adalah untuk memindahkan fail ke TypeScript. Dengan ini kita dapat melengkapkan langkah ini dan beralih ke langkah seterusnya.

3.

Keindahan TypeScript ialah anda boleh mengadopsi langkah demi langkah. Kita boleh memulakan bahagian pertama penghijrahan dari komponen mudah. Untuk projek saya, saya akan mulakan dengan komponen butang yang kelihatan seperti ini:

<code>npm install --save typescript @types/node @types/react @types/react-dom @types/jest</code>

Untuk menukarnya dengan betul, kita perlu melakukan dua perkara:

Tukar pelanjutan fail ke .tsx
tambahkan komen jenis

Oleh kerana komponen ini menggunakan dua alat, kita perlu mengubah sesuatu:

<code>yarn add typescript @types/node @types/react @types/react-dom @types/jest</code>

mari kita periksa semula bahawa segala -galanya berfungsi dengan baik dengan menjalankan projek untuk memastikan kami tidak memecahkan apa -apa. Sila ambil perhatian bahawa di sini React-Scripts secara automatik mengesan perubahan baru dan ubah suai tsconfig.json untuk kami! Lihat! Betapa cantiknya ini?

Jika semuanya berjalan lancar, projek kami akan tetap berfungsi. Pat belakang anda! Anda telah berjaya memindahkan fail pertama anda ke TypeScript. Jika kita mahu berhenti di sini, kita boleh, tetapi mari terus maju.

4.

Langkah seterusnya adalah untuk melaksanakan langkah 3 pada semua fail dalam projek. Jika projek yang anda berhijrah agak besar, saya cadangkan anda melakukan pelbagai lelaran ini. Jika tidak, anda boleh membuang diri.

Dalam langkah ini, anda mungkin perlu menambah pakej tambahan mengikut perpustakaan pihak ketiga yang anda gunakan. Sebagai contoh, saya menggunakan momen, jadi saya perlu menjalankan benang tambah -d @jenis/momen untuk menambah jenis sebagai kebencian.

Semasa melakukan ini, anda perlu ingat perkara berikut:

menindas ralat typescript dengan menambahkan // @ts-ignore dalam baris sebelum ralat

• Jika fail menggunakan jsx (iaitu
• ), lanjutan fail mestilah .tsx bukan .ts Jalankan projek secara tempatan untuk memastikan semuanya berfungsi (mereka harus)
Setelah menyelesaikan langkah ini, kerja sukar selesai! Projek kami akan menggunakan TypeScript, tetapi kami perlu meningkatkan ketegasan kami untuk memanfaatkan kelebihannya.

5.

Sekarang kita dapat meningkatkan ketegangan dengan membolehkan peraturan yang lebih ketat dalam tsconfig.json. Syukurlah, Scripts React memberitahu kami tentang apa-apa jenis ralat apabila menjalankan projek kami secara tempatan. Kami akan mengikuti langkah -langkah di bawah:

Dayakan Peraturan

Projek Permulaan Tempatan
Betulkan ralat
3. kami akan mengulangi proses ini untuk peraturan berikut:

"noimplicitany": benar

"StrictNullChecks": TRUE
"noimplicitThis": benar
"Swasta": Benar
Saya mahu berkongsi silap mata. Jika anda mendapati sesuatu secara tersirat mempunyai jenis apa -apa dan anda tidak pasti bagaimana untuk memperbaikinya pada ketika ini, jangan membetulkannya. Buat ini dan gunakannya untuk menghapuskan kesilapan:

Matlamat kami adalah untuk bergerak ke hadapan dengan cepat dan kembali untuk menyelesaikan isu -isu ini kemudian.

Ini akan membawa keselamatan jenis yang lebih besar kepada projek kami. Jika anda ingin membaca lebih lanjut mengenai pilihan pengkompil, anda boleh membaca kandungan yang berkaitan dalam manual Typescript.

Selepas ini selesai, kita boleh menggantikannya:

• "noimplicitany": benar
• "StrictNullChecks": TRUE
• "noimplicitThis": benar
• "Swasta": Benar

Gunakan ini:

"ketat": benar

Ini juga membolehkan pilihan ketat ini:

StrictBindCallApply
StrictNullChecks
StrictFunctionTypes
StrictPropertyinitialization

Pada ketika ini, kami telah mencapai tahap ketat standard dalam projek ini. Jika kita mahu menambah cek tambahan, kita boleh menambah peraturan ini:

"nounusedlocals": true
"NounusedParameters": TRUE
"noimplicitreturns": true
"nofallthroughcasesinswitch": true

Apabila kita mencapai tahap ketat yang kita puas, kita boleh bergerak ke langkah seterusnya.

6.

Jika anda menambah @ts-ignore atau menggunakan jenis fixmelater, sudah tiba masanya untuk kembali dan membetulkannya. Kami tidak perlu melakukan semua ini sekaligus, atau tidak, tetapi ini akan menjadi langkah terakhir untuk memastikan keselamatan jenis maksimum dalam projek.

Kadang -kadang usaha untuk memperbaikinya tidak bernilai masa, tetapi kadang -kadang ia berbaloi. Anda perlu berbincang dengan pasukan anda dan memutuskan apa yang masuk akal.

7

Kami melakukannya! Kami secara rasmi memindahkan projek ke TypeScript. Luangkan sedikit masa untuk meraikan kerja anda. Ini pastinya bukan perkara remeh. Terutama jika anda bekerja di pangkalan kod besar.

perkara yang perlu diingat

Semasa kita mengkaji semula kerja kita, berikut adalah beberapa perkara yang perlu diingat ketika memindahkan projek React kami kepada TypeScript.

bermula dari perkara kecil

Gunakan keupayaan untuk secara beransur -ansur mengadopsi TypeScript. Lakukan satu dokumen pada satu masa, pada kadar anda sendiri. Lakukan apa yang masuk akal untuk anda dan pasukan anda. Jangan cuba menyelesaikan semua masalah sekaligus.

pendahuluan ketat dari masa ke masa

tidak perlu ketegangan maksimum dari awal. Ini adalah perjalanan. Meningkatkan tahap dari masa ke masa. Akhirnya, anda akan mencapai tahap yang berasa selesa. Jangan berasa sedih jika anda tidak mempunyai ketat 100%. Sesetengah jenis keselamatan adalah lebih baik daripada tiada jenis keselamatan.

bergantung pada pintasan

@ts-ignore dan petua fixmelater dapat membantu meringankan beban penghijrahan. Tidak semuanya perlu diubah sekaligus. Gunakan pintasan seperti yang diperlukan, tetapi jangan merasa tidak enak menggunakannya. Sekali lagi, perkara itu adalah penghijrahan, tetapi ia tidak sepatutnya sangat menyakitkan. Dari masa ke masa, anda boleh mengutamakan menggantikannya dengan keselamatan jenis yang betul. Tetapi ingat bahawa alat ini tersedia untuk anda, jadi gunakannya.

Ini bukan satu -satunya cara untuk memindahkan projek React kepada TypeScript. Walau bagaimanapun, ini berfungsi untuk saya. Saya harap ia dapat membantu anda kerana ia membantu saya.

bacaan selanjutnya

• React with TypeScript: Amalan Terbaik
• Cara Praktikal untuk Meningkatkan Kemahiran TypeScript
• Bagaimana TypeScript menjadikan anda pemaju JavaScript yang lebih baik
• javascript: dari newbie ke ninja, edisi kedua
• React dan React edisi asli -second

Terima kasih khas kepada Karl Horky, yang menjangkau dengan menjelaskan bahawa jenis React.FC tidak disyorkan kerana ia mempunyai sedikit faedah dan mempunyai beberapa kelemahan. Untuk maklumat lanjut, lihat perbincangan GitHub ini.

Soalan Lazim pada Aplikasi React Migrasi ke TypeScript

Apa itu TypeScript dan mengapa saya harus mempertimbangkan untuk memindahkan aplikasi React saya? TypeScript adalah superset statik yang ditaip javascript yang menyediakan pemeriksaan jenis yang dipertingkatkan, kualiti kod, dan sokongan alat. Berhijrah ke TypeScript boleh membantu anda menangkap kesilapan pada masa penyusunan, meningkatkan pemeliharaan kod, dan meningkatkan pengalaman pemaju ketika berurusan dengan aplikasi React.

Bagaimana untuk mula memindahkan aplikasi React saya ke TypeScript? Untuk memulakan, anda boleh menambah TypeScript ke projek anda menggunakan alat seperti Create React App dengan templat Typescript, atau konfigurasi secara manual projek anda untuk menyokong TypeScript. Anda juga perlu menamakan semula fail .js dan .jsx ke .ts dan .tsx masing -masing.

Apakah proses menukar kod JavaScript saya ke TypeScript? Proses ini biasanya termasuk: a. b. c. d.

Bolehkah saya memindahkan aplikasi React saya ke langkah -langkah typescript? Ya, anda boleh memindahkan langkah anda langkah demi langkah. Anda boleh menukar komponen atau modul satu demi satu sambil mengekalkan asas kod JavaScript yang sedia ada. Dengan cara ini, anda boleh beralih ke langkah -langkah TypeScript tanpa mengganggu aliran kerja pembangunan anda.

Apakah faedah menggunakan TypeScript dan React? Sesetengah faedah termasuk kualiti kod yang lebih baik, produktiviti pemaju yang lebih baik, kod yang dipertingkatkan autokomplete, alat refactoring yang lebih kuat, dan pengesanan awal kesilapan biasa. Ia juga menyediakan kod yang lebih jelas dan lebih dokumentari melalui anotasi jenis.

Bagaimana menangani perpustakaan dan kebergantungan pihak ketiga ketika berhijrah ke TypeScript? Anda boleh mencari fail definisi jenis jenis untuk banyak perpustakaan yang popular (biasanya dengan lanjutan .d.ts) pada pastiTyped, atau gunakan alat seperti @Types. Jika definisi jenis tidak tersedia, anda boleh membuat definisi jenis anda sendiri, atau menggunakan jenis mana -mana jenis untuk mengendalikan perpustakaan yang tidak disediakan.

Bagaimana untuk mengkonfigurasi alat pembangunan saya dan IDE untuk menggunakan TypeScript dalam aplikasi React? Editor kod yang paling popular dan IDE seperti Kod Visual Studio mempunyai sokongan yang hebat untuk TypeScript. Anda boleh memasang plugin dan sambungan TypeScript untuk editor anda untuk mendapat manfaat daripada integrasi TypeScript yang dipertingkatkan, autocomplete, dan pemeriksaan ralat.

Apakah cabaran biasa yang saya ada ketika berhijrah ke TypeScript? Cabaran umum termasuk menangani kesilapan jenis, mengendalikan perpustakaan pihak ketiga yang kekurangan definisi jenis, memahami sistem jenis TypeScript, dan menyesuaikan diri dengan jenis yang lebih ketat yang menguatkuasakan TypeScript.

Atas ialah kandungan terperinci Cara Menghijrah Aplikasi React ke TypeScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!