Memindahkan Projek JavaScript ke TypeScript: Panduan Langkah demi Langkah

Pasang TypeScript dan konfigurasi tsconfig.json, membolehkan membenarkan untuk menyokong fail JavaScript dan TypeScript bercampur; 2. Mulailah dengan modul yatim seperti fungsi alat, secara beransur -ansur menamakan semula fail .js ke .ts dan menetapkan ralat jenis. Anda terlebih dahulu boleh menggunakan JSDOC untuk meningkatkan kesimpulan jenis; 3. Secara beransur-ansur membolehkan peraturan cek yang ketat dalam mod yang ketat, menyelesaikan masalah seperti noimplicitany dan StrictNullChecks satu demi satu untuk mengelakkan penyalahgunaan @ts-ignore; 4. Pasang pakej @Types untuk perpustakaan pihak ketiga, buat fail pengisytiharan dalam direktori jenis apabila jenis hilang dan konfigurasikan typeroots; 5. Mengintegrasikan TSC ke dalam proses pembinaan, menetapkan skrip jenis-jenis dan jalankannya dalam CI untuk mencegah kemerosotan jenis; 6. Tambah antara muka atau definisi jenis semasa refactoring, gantikan apa -apa dengan jenis tertentu, dan mengekalkan penambahbaikan tambahan; 7. Pasukan memperkenalkan integrasi ESLINT dan TYPECRIPT, sokongan editor konfigurasi, dan mod definisi jenis bersama. Kunci penghijrahan adalah secara beransur-ansur memajukan daripada menulis semula, dan untuk mencapai keselamatan jenis melalui lelaran langkah kecil. Malah beberapa pengangkatan dapat mengurangkan pepijat persekitaran pengeluaran secara berkesan. Matlamat utama adalah untuk terus meningkatkan liputan jenis tanpa mengganggu fungsi yang sedia ada.

Memindahkan projek JavaScript ke TypeScript bukan tentang menulis semula segala -galanya semalaman -ini mengenai penambahan keselamatan jenis secara bertahap sambil mengekalkan kod anda berfungsi. Inilah caranya untuk melangkah langkah demi langkah, tanpa melanggar aliran kerja atau pasukan anda.

1. Sediakan jenis dalam projek anda

Mulakan dengan memasang TypeScript dan sediakan fail konfigurasi.

 NPM Pemasangan TypeScript--Save-Dev
NPM Pasang @Types/Node--Save-Dev # Jenis Biasa, Laraskan seperti yang diperlukan

Buat fail tsconfig.json untuk menentukan bagaimana typescript harus berkelakuan:

 {
  "CompilerOptions": {
    "Sasaran": "ES2020",
    "Modul": "Commonjs",
    "Benarkanjs": Benar,
    "Outhir": "./dist",
    "rootdir": "./src",
    "ketat": benar,
    "EsmoduleInterop": Benar,
    "Skiplibcheck": Benar,
    "ForceConsistentCasingInfileNames": Benar
  },
  "Termasuk": ["src/**/*"]
}

Pilihan Utama:

• "allowJs": true - membolehkan anda menyimpan fail .js semasa secara beransur -ansur menambah .ts .
• "strict": true - membolehkan pemeriksaan jenis ketat (disyorkan untuk penukaran baru).
• "outDir" dan "rootDir" - pastikan output yang disusun anda teratur.

Anda boleh menjana fail ini secara interaktif:

 NPX TSC - -init

2. Mulakan dengan fail yang lebih kecil dan terpencil

Jangan cuba menukar seluruh asas kod anda sekaligus. Mulakan dengan:

• Fungsi utiliti
• Modul pembantu
• Komponen Murni (dalam aplikasi React/Vue)

Namakan semula fail .js ke .ts (atau .tsx jika menggunakan React with JSX), kemudian jalankan:

 NPX TSC --noemit

Jenis pemeriksaan ini tanpa menghasilkan output. Betulkan sebarang kesilapan yang muncul.

? Petua Pro: Gunakan komen JSDOC dalam fail .js terlebih dahulu untuk mendapatkan kesimpulan jenis yang lebih baik. TypeScript dapat memahami jenis seperti:

 /**
 * @param {string} nama
 * @returns {Number}
 */
fungsi getNamelength (nama) {
  kembali nama.length;
}

Ini membantu semasa peralihan dan meningkatkan autocomplete.

3. Secara beransur -ansur menguatkuasakan keselamatan jenis

Setelah TypeScript berjalan, tingkatkan ketat dari masa ke masa.

Kemas kini tsconfig.json untuk menangkap lebih banyak isu:

 "Noimplicitany": Benar,
"StrictNullChecks": Benar,
"NoimplicitReturns": Benar,
"Nofallthroughcasesinswitch": Benar

Betulkan satu peraturan pada satu masa. Contohnya:

• Mulakan dengan noImplicitAny → Tambah Jenis di mana mereka hilang.
• Kemudian aktifkan strictNullChecks → Handle null / undefined Cases.

Gunakan // @ts-ignore dengan berhati-hati-dan selalu tambahkan komen yang menjelaskan mengapa:

 // @ts-ignore: Abaikan sementara sehingga respons API ditaip
const data = response.data.users;

Lebih baik lagi, gunakan // @ts-expect-error jika anda merancang untuk memperbaikinya kemudian.

4. Mengendalikan perpustakaan pihak ketiga

Banyak pakej NPM mempunyai sokongan jenis terbina dalam atau jenis yang dikendalikan oleh komuniti.

Pasang jenis apabila tersedia:

 NPM Install @types/react @types/express @types/loDash --el-save-dev

Sekiranya jenis tidak wujud:

• Buat shim dalam types/ folder:

   // jenis/my-library.d.ts
  mengisytiharkan modul 'my-library' {
    nilai const: Mana -mana;
    nilai lalai eksport;
  }

• Rujuk di tsconfig.json :

   "Typeroots": ["node_modules/@types", "types"]

5. Bersepadu dengan alat binaan anda

Kemas kini skrip binaan anda untuk menjalankan TypeScript.

Sebagai contoh, dalam package.json :

 "Skrip": {
  "membina": "tsc",
  "Dev": "TSC -Watch"
}

Jika anda menggunakan Babel (contohnya, dalam Create React App), anda boleh membiarkan Babel mengendalikan TypeScript (tetapi anda masih memerlukan tsc --noEmit untuk pemeriksaan jenis dalam CI).

Tambahkan skrip pemeriksaan jenis:

 "Skrip": {
  "jenis-cek": "TSC --noemit",
  "jenis-cek: menonton": "TSC --noemit --watch"
}

Jalankannya dalam saluran paip CI anda untuk mengelakkan regresi jenis.

6. Refactor Langkah demi Langkah

Semasa anda menukar fail:

• Namakan semula .js → .ts
• Tambahkan antara muka untuk bentuk objek
• Ganti any dengan jenis tertentu jika mungkin

Contoh:

 // Sebelum ini (dalam .js dengan jsdoc atau tersirat)
fungsi createUser (pengguna) {
  kembali {id: 1, ... user};
}

// selepas
pengguna antara muka {
  Nama: String;
  E -mel: String;
}

fungsi createUser (pengguna: pengguna): pengguna & {id: nombor} {
  kembali {id: 1, ... user};
}

Gunakan interface atau type berdasarkan keutamaan:

• interface diperpanjang dan baik untuk bentuk objek.
• type lebih fleksibel (kesatuan, primitif, dan lain -lain).

7. Melatih pasukan anda dan kemas kini perkakas

• Tambah typescript linting dengan eslint:

   NPM Pasang Eslint @TypeScript-Eslint/Parser @TypeScript-Eslint/Eslint-Plugin--Save-Dev

• Konfigurasikan .eslintrc untuk menyokong sintaks TypeScript dan amalan terbaik.
• Sediakan sokongan editor (VS Code berfungsi hebat dari kotak).
• Berkongsi corak biasa dalam pasukan anda (misalnya, bagaimana menaip prop react, tindakan redux, dll.).

---

Pemikiran terakhir

Penghijrahan TypeScript adalah perjalanan-bukan acara satu kali. Kuncinya ialah:

• Mula kecil
• Pastikan aplikasi berjalan
• Memperbaiki liputan jenis secara bertahap
• Gunakan perkakas untuk menangkap kesalahan lebih awal

Anda tidak memerlukan 100% TypeScript untuk mendapat manfaat daripada penerimaan 20%. Malah menaip separa menangkap pepijat sebelum mereka mencapai pengeluaran.

Pada asasnya, hanya bermula -dan terus bergerak ke hadapan.

Atas ialah kandungan terperinci Memindahkan Projek JavaScript ke TypeScript: Panduan Langkah demi Langkah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!