Pengisytiharan modul dalam TS

Di sini kita belajar cara menulis fail pengisytiharan Typescript berkualiti tinggi. Jadi anda mengekod dalam ReactJS dan ingin mengimport fail SVG tetapi IDE/tsc anda mengeluh.

[ts] cannot find module './logo.svg'

Inilah masanya untuk beralih kepada Stackoverflow untuk penyelesaian copypaste pantas.

Tetapi mari kita berpegang teguh dan cuba memahami fail ini dan apa yang mereka lakukan untuk kita seketika.

Apakah modul?

Dalam TS/JS kami mempunyai banyak pendekatan untuk memodulasi apl kami yang ditulis dalam TS/JS. Pada masa ini yang paling berkuasa ialah ESM (modul AKA ES, modul ES6). Kami biasanya mengenali mereka dengan sintaks mereka:

Jadi untuk menjawab soalan asal, dalam TS/JS selaras dengan ECMAScript 2015, sebarang fail yang mengandungi peringkat atas import atau eksport dianggap sebagai modul.

Dan jika seseorang tidak mempunyai sebarang import atau eksport peringkat tertinggi:

1. Ia boleh didapati di mana-mana sahaja.
2. Ia dianggap sebagai skrip.

Mengapa menggunakan modul?

Tiada pencemaran ruang nama global lagi. Ini menunjukkan bahawa:

1. Modul dilaksanakan dalam skopnya sendiri.
2. Kami perlu mengeksport secara eksplisit apa sahaja yang kami ingin eksport.
3. Pengguna boleh mengimport daripada modul lain perkara yang mereka dedahkan kepada orang lain.

Eksport dinamakan dan eksport lalai

Resolusi modul

Dalam resolusi modul TS ialah proses mengambil rentetan daripada pernyataan import atau memerlukan dan menentukan fail yang dirujuk oleh rentetan itu.

Dalam TS kita ada dua strategi:

1. Klasik:
   • Yang lalai.
   • Modul compilerOptions. bukan "CommonJS".
   • Disertakan untuk keserasian ke belakang.
2. Nod:
   • Meniru cara NodeJS berfungsi dalam mod CommonJS.
   • Semakan tambahan untuk fail .ts dan .d.ts.

BTW kami mempunyai banyak tempat yang kami mungkin sengaja atau tidak sengaja mengubahnya (moduleResolution, baseUrl, laluan, rootDir).

modulResolution

• Mengawal cara TS menyelesaikan penentu modul (literal rentetan dalam import/eksport/memerlukan pernyataan) kepada fail pada cakera.
• Hendaklah ditetapkan untuk memadankan penyelesai modul yang digunakan oleh masa jalan sasaran atau pengikat.

Contohnya jika anda sedang membina apl anda untuk menggunakan ESM (versi yang disusun menggunakan ESM) maka anda perlu memilih "NodeNext" dalam compilerOptions.module anda.

• Selagi kami menggunakan sambungan fail laluan relatif TS boleh menyelesaikannya (cth. import {} daripada "./a.js"; // ✅ Berfungsi dalam setiap modulResolution).
• Jika anda merancang untuk menyusun apl anda untuk menggunakan ESM, maka anda perlu menentukan sambungan fail dan tidak boleh pergi tanpa sambungan (cth. import {} daripada 'a.mjs';).
• Anda juga boleh mengimport direktori yang dijangka mempunyai fail index.ts.

Nota: jika di dalam dir itu anda mempunyai package.json. Kemudian TS menggunakan utama dan jenisnya untuk mengambil jenisnya.

Ketahui lebih lanjut di sini.

laluan

Jadi pada asasnya ia memetakan semula import untuk mencari lokasi*s* berbanding dengan baseUrl jika ditetapkan, sebaliknya kepada fail tsconfig. Kes penggunaan yang paling biasa untuk ini ialah alias laluan:

[ts] cannot find module './logo.svg'

Awas

Ini tidak bermakna apa-apa untuk masa jalan. Bermakna pengikat atau pengkompil kesayangan anda perlu menjaga penggabungan mereka dengan betul. Dan jika laluan anda menghala ke tempat yang tidak wujud maka apl anda akan ranap apabila ia dilaksanakan oleh NodeJS.

Petua

Sebaliknya, anda boleh menggunakan import package.json (AKA Subpath import).

baseUrl

• Direktori asas untuk menyelesaikan penentu kosong¹ nama modul
• Mempunyai keutamaan yang lebih tinggi daripada carian daripada node_modules.
• Tidak lagi perlu ditetapkan apabila menggunakan laluan.

rootDirs

• Banyak direktori "maya" bertindak sebagai punca tunggal.
• Kemudian pengkompil boleh menyelesaikan import modul relatif dalam direktori "maya" ini, seolah-olah ia digabungkan menjadi satu direktori.

JS yang disusun

Untuk menjejaskan output JS yang dipancarkan, kami boleh mengubah suai:

• compilerOptions.target:
  • Menentukan ciri JS yang ditukar untuk dijalankan dalam masa jalan JavaScript yang lebih lama.
  • Ditentukan oleh keperluan aplikasi kami, perkara seperti pada penyemak imbas/NodeJS/Electron yang mana saya akan menjalankan kod TS yang disusun ini.
• compilerOptions.module:
  • masa jalan sistem modul manakah yang akan digunakan.
  • Gunakan "nodenext" untuk projek NodeJS moden. Ia membaca fail package.json yang terdekat dan menggunakan nilai "jenis" untuk memutuskan sama ada ia harus digunakan untuk CommonJS atau ESM.
  • Gunakan "esnext" apabila anda akan menghimpunkannya dengan berkas.

Berbalik kepada topik utama

Jadi, kami ingin mengimport fail .graphql atau sambungan lain yang TS tidak mempunyai idea tentang rupa mereka (ia tidak dapat menyelesaikan jenisnya). Jadi sekarang TS tahu rupa svg, graphql atau fail lain yang diimport.

rujuk.

1. Penentukan kosong: nama modul dalam pernyataan import yang BUKAN laluan relatif atau mutlak. Ini biasanya nama pakej dalam node_modules projek anda atau lokasi lain yang dikonfigurasikan. ↩

Atas ialah kandungan terperinci Pengisytiharan modul dalam TS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!