Cara menyediakan TypeScript dengan Node.js dan Express

Mencipta pelayan dengan TypeScript menggunakan Node.js dan Express adalah bagus alternatif kepada menggunakan JavaScript kerana ia menjadikannya lebih mudah untuk diurus aplikasi kompleks dan membantu apabila anda perlu bekerjasama dengan a pasukan pembangun yang diedarkan.

TypeScript menawarkan faedah seperti:

• Kekuatan dan kejelasan kod yang dipertingkatkan apabila menaip statik
• Kolaborasi yang dipertingkatkan dan skalabiliti projek
• Perkakas lanjutan
• IDE sokongan
• Keserasian luas

Semua faedah ini menjadikan TypeScript pilihan yang bagus untuk pengalaman pembangunan yang lebih lancar, terutamanya dalam projek yang sedang berkembang.

Dalam artikel ini, kami' akan meneroka cara yang mesra pemula untuk mengkonfigurasi TypeScript dalam aplikasi Express, serta memperoleh pemahaman tentang kekangan asas yang menyertainya. Untuk mengikuti, anda sepatutnya mempunyai:

• Node.js ≥ v18.x dipasang dalam persekitaran pembangunan setempat anda
• Akses kepada pengurus pakej seperti npm, pnpm atau Yarn
• Kebiasaan asas dengan Node.js dan Express

Lihat GitHub repositori untuk kod sumber; cawangan utama mempunyai projek TypeScript, dan cawangan JavaScript mempunyai versi JavaScript.

Membuat fail package.json

Mulakan dengan mencipta direktori baharu dalam pembangunan setempat anda persekitaran, dan di dalamnya, gunakan perintah pemula npm untuk mencipta fail package.json. Jika anda menggunakan pengurus pakej selain npm, pertimbangkan untuk mematuhi arahan init yang disediakan oleh pengurus pakej khusus itu:

mkdir ts-node-expresscd ts-node-express/npm init -y

Apabila memulakan fail package.json dengan cara ini, --yes atau -y flag menggunakan tetapan lalai yang dikonfigurasikan oleh npm, memintas soalan berulang yang meminta butiran projek. Fail package.json yang terhasil mungkin kelihatan serupa dengan yang ditunjukkan dalam imej berikut:

Oleh kerana titik masuk aplikasi kami ialah src/index.js, yang mana kami akan alamat dalam bahagian yang akan datang, anda harus mengemas kini medan utama dalam fail package.json daripada index.js kepada src/index.js:

{
  "name": "ts-node-express",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  ...}

Mencipta pelayan minimum dengan Express

Selepas memulakan fail package.json, tambahkan pakej Express dan DotEnv pada projek. Dalam tetingkap terminal, jalankan arahan berikut, dengan npm i adalah alias untuk pemasangan npm:

npm i express dotenv

Pakej DotEnv digunakan untuk membaca pembolehubah persekitaran daripada .env fail. Daripada pengekodan keras pembolehubah khusus persekitaran secara langsung ke dalam apl, masukkan kesemuanya dalam fail ini dan gunakan pakej DotEnv untuk mengurusnya.

Sebagai contoh, untuk menentukan nombor port untuk pelayan anda, buat fail bernama .env dalam akar direktori projek. Di dalam fail ini, tentukan pembolehubah persekitaran untuk PORT dan tetapkan nilainya kepada 3000. Pertimbangkan untuk menambah lebih banyak pembolehubah khusus persekitaran dalam fail ini pada masa hadapan seperti yang diperlukan:

mkdir ts-node-expresscd ts-node-express/npm init -y

Kemudian, buat direktori yang dipanggil src at akar projek untuk menyusun fail sumber aplikasi kami. Tambahkan fail baharu bernama index.js padanya dan isikannya dengan kod berikut, termasuk pembolehubah persekitaran yang ditakrifkan sebelum ini:

{
  "name": "ts-node-express",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  ...}

Kod di atas merangkumi langkah penting untuk menyediakan minimum Pelayan ekspres menggunakan JavaScript biasa. Untuk penjelasan yang lebih terperinci, rujuk versi yang didokumenkan bagi coretan ini.

Untuk memulakan pelayan, laksanakan nod arahan src/index.js dalam terminal. Ini akan melaksanakan kod yang baru kami tambahkan pada fail index.js dan harus memulakan pelayan baharu, seperti yang digambarkan di bawah:

Pelayan Express kini sedang beroperasi, menawarkan asas persediaan untuk pembangunan dengan Express pada Node.js. Seterusnya, mari kita tingkatkan dengan memasukkan TypeScript dalam bahagian seterusnya.

Memasang TypeScript

Kami akan bermula dengan memasang TypeScript sebagai kebergantungan pembangunan. Selain itu, kami akan memasang pakej pengisytiharan @types untuk Express dan Node.js, yang menawarkan definisi jenis dalam bentuk fail pengisytiharan.

Fail pengisytiharan, biasanya dilambangkan dengan .d.ts sambungan, berfungsi sebagai modul pratakrif yang menggariskan struktur Nilai JavaScript atau jenis yang ada untuk pengkompil TypeScript. Fail pengisytiharan ini tersedia untuk perpustakaan yang ditulis pada asalnya dalam JavaScript, bukan TypeScript.

Repositori GitHub DefinitelyTyped mengekalkan definisi jenis TypeScript untuk kegunaan langsung dalam Node.js dan projek JavaScript lain, menjimatkan usaha anda untuk menentukannya jenis dari awal. Untuk memasukkan jenis atau fail pengisytiharan untuk a perpustakaan atau modul tertentu, cari pakej bermula dengan ruang nama @types.

Lancarkan terminal dan pasang pakej yang diterangkan di atas menggunakan arahan berikut:

npm i express dotenv

The -D, atau -- dev, bendera mengarahkan pengurus pakej untuk memasang perpustakaan ini sebagai kebergantungan pembangunan.

Memasang pakej ini akan menambah objek devDependencies baharu pada fail package.json, yang menampilkan butiran versi untuk setiap pakej, seperti yang ditunjukkan di bawah:

mkdir ts-node-expresscd ts-node-express/npm init -y

Menjana fail konfigurasi TypeScript: tsconfig.json

Setiap projek TypeScript menggunakan fail konfigurasi untuk mengurus pelbagai tetapan projek. tsconfig.json fail, yang berfungsi sebagai fail konfigurasi TypeScript, menggariskan ini pilihan lalai dan menawarkan fleksibiliti untuk mengubah suai atau menyesuaikan tetapan pengkompil untuk memenuhi keperluan anda.

Fail tsconfig.json biasanya diletakkan pada akar projek. Untuk menjana fail ini, gunakan arahan tsc berikut, memulakan Pengkompil TypeScript:

{
  "name": "ts-node-express",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  ...}

Sebaik sahaja anda melaksanakan arahan ini, anda akan melihat tsconfig.json fail dibuat pada akar direktori projek anda. Fail ini mengandungi pilihan pengkompil lalai, seperti yang digambarkan dalam imej di bawah:

Setelah membuka fail tsconfig.json, anda akan melihat beberapa pilihan pengkompil lain yang dikomen. Di antara semua pilihan ini, compilerOptions ialah medan wajib yang mesti dinyatakan. Berikut ialah ringkasan semua pilihan lalai yang terdapat dalam medan CompilerOptions:

• sasaran: Mendayakan spesifikasi versi JavaScript sasaran yang akan dikeluarkan oleh pengkompil
• modul: Memudahkan penggunaan pengurus modul dalam disusun Kod JavaScript. CommonJS disokong dan merupakan standard dalam Node.js
• ketat: Menogol protokol semakan jenis yang ketat
• esModuleInterop: Mendayakan penyusunan modul ES6 kepada modul CommonJS
• skipLibCheck: Apabila ditetapkan kepada benar, memintas pemeriksaan jenis perisytiharan perpustakaan lalai fail
• forceConsistentCasingInFileNames: Apabila ditetapkan kepada benar, menguatkuasakan penamaan fail sensitif huruf besar/kecil

Satu pilihan penting yang perlu anda dayakan ialah outDir, yang menentukan direktori destinasi untuk output yang disusun. Cari pilihan ini dalam fail tsconfig.json dan nyahkomennya.

Secara lalai, nilai pilihan ini ditetapkan kepada punca projek. Tukar kepada dist, seperti yang ditunjukkan di bawah:

npm i express dotenv

Walaupun mungkin terdapat pilihan konfigurasi lain yang boleh anda tambahkan pengkompil TypeScript, pilihan di atas adalah spesifikasi asas yang boleh membantu anda bermula.

Anda kini harus mengemas kini medan utama dalam fail package.json kepada dist/index.js kerana kod TypeScript akan menyusun daripada direktori src kepada dist.

Atas ialah kandungan terperinci Cara menyediakan TypeScript dengan Node.js dan Express. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!