Cara Menggunakan TypeScript Dengan Proyek Node.js Anda

TypeScript berguna untuk membuat aplikasi yang kompleks dan arsitektur yang kuat seperti layanan mikro. Tentu saja, TypeScript tidak dapat melakukan apa pun yang tidak dapat dilakukan JavaScript, tetapi dapat membuat proyek yang kompleks lebih mudah dikelola. Pengetikan ketat TypeScript dan dukungan untuk antarmuka berarti sangat bagus untuk pemrograman berorientasi objek. Kami telah melihat banyak perusahaan beralih ke TypeScript untuk mengkodekan backend mereka.

Tidak ada waktu yang lebih baik untuk mulai menggunakan TypeScript di proyek Node.js Anda selain sekarang. Tetapi bagaimana Anda bisa mengaturnya untuk proyek Node.js Anda? Anda akan mengetahuinya di artikel ini.

Apa itu TypeScript?

TypeScript adalah versi JavaScript yang dikompilasi dan diketik dengan ketat yang dikembangkan dan dikelola oleh Microsoft. Kode TypeScript berubah menjadi JavaScript.

Sifat pengetikan yang ketat dari TypeScript membantu pengembang menghindari bug dalam kode mereka. Itu hanya akan mengkompilasi kode yang memenuhi aturan tipe data yang ditentukan. Ini membuat kode TypeScript lebih kuat daripada rekan JavaScript murninya.

Ini juga mendukung pemrograman fungsional dan berorientasi objek. Semua fitur ini membuatnya sangat skalabel dan cocok untuk mengembangkan aplikasi yang kompleks.

Cara Mengatur TypeScript di Node.js JS

Anda harus melakukan beberapa konfigurasi di sana-sini untuk mulai menggunakan TypeScript dengan proyek Node.js Anda. Tapi jangan khawatir, itu mudah.

Namun, pastikan bahwa Anda instal paket npm Node.js sebelum melanjutkan.

Inisialisasi File package.json

Buka terminal Anda dan buat folder proyek. Kemudian, masukkan direktori baru ini dan inisialisasi proyek Node.js:

npm init

Perintah di atas membuat package.json file untuk menyimpan dependensi Anda.

Instal TypeScript dan Dependensi Lainnya

Selanjutnya, lanjutkan dan instal TypeScript ke dalam proyek Node.js Anda:

naskah npm i -D

Itu -D kata kunci memastikan bahwa TypeScript diinstal sebagai bagian dari devDependencies di package.json.

Anda juga harus menginstal @tipe/ekspres, definisi TypeScript untuk Express.js:

npm install -D @tipe/express

Selanjutnya, inisialisasi a tsconfig.json mengajukan. Ini merinci opsi kompiler dasar untuk proyek Anda:

npx tsc --init

Perintah di atas membuat tsconfig.json file di folder root proyek Anda.

Juga, instal Express.js. Anda dapat melewati ini jika Anda hanya ingin mengelola server dengan primitif HTTP bawaan Node.js. Tetapi Express.js membuatnya mudah:

npm Install cepat

Selanjutnya, instal nodemon, paket yang memulai ulang server Anda secara otomatis setiap kali ada perubahan dalam kode Anda. Pastikan untuk menginstal ini secara global agar berfungsi:

npm Install -g nodemon

Konfigurasi TypeScript Dengan Node.js JS

Buka tsconfig.json file yang Anda inisialisasi sebelumnya menggunakan editor kode yang dipilih. Mungkin ada banyak dalam file ini. Meskipun Anda dapat mengonfigurasi file ini dalam bentuknya saat ini, Anda dapat mengganti seluruh kontennya dengan yang di bawah ini untuk membuatnya lebih sederhana.

Ini semua yang Anda butuhkan di tsconfig.json untuk pergi:

{
"compilerOptions": {
"modul": "umum",
"esModuleInterop": BENAR,
"target": "es6",
"modulResolusi": "simpul",
"sumberPeta": BENAR,
"keluarDir": "jarak" //Menentukan direktori transpiler. 
 },
"lib": ["es2015"]
}

Sekarang buka package.json. Berikut tampilannya saat ini setelah menginstal TypeScript dan Express:

Selanjutnya, tambahkan konfigurasi berikut ke skrip Himpunan:

"skrip": {
"uji": "gema \"Kesalahan: tidak ada tes yang ditentukan\"&& keluar 1",
"membangun": "npx tsc",
"Mulailah": "simpul ./dist/app.js",
"jarak": "tsc -p .",
 "dev": "nodemon ./src/app.ts", //Mengganti ini dengan yang benar direktorijaluruntuk aplikasi.ts di milikmu kasus
"Tipe": "modul"
}

Konfigurasi di atas mengarahkan server Anda untuk memulai app.js, transpiler. Jangan khawatir, ini adalah file default yang akan dibuat secara otomatis di a jarak folder saat Anda menjalankan membangun naskah. Anda akan melakukan ini nanti.

Konfigurasi kemudian menentukan skrip pengembangan utama sebagai aplikasi.ts.

Oleh karena itu, ketika Anda memulai lingkungan pengembangan, nodemon lari aplikasi.ts. Node.js kemudian mengkompilasi ini ke dalam JavaScript di dalam app.js—yang berkomunikasi dengan server HTTP.

Selanjutnya, buat src folder di direktori root proyek Anda. Di dalam folder ini, buat file TypeScript kosong dan beri nama aplikasi.ts.

Buat Direktori Transpiler

Transpiler adalah file JavaScript yang mengkompilasi kode TypeScript menjadi JavaScript asli. Jadi ini memastikan bahwa server dapat berhubungan dengan kode Anda sebagai JavaScript alih-alih skrip yang diketik dengan ketat.

Jadi ketika TypeScript menangani struktur kode, file transpiler mengkompilasinya ke dalam JavaScript.

Sekarang jalankan membangun skrip untuk membuat jarak direktori transpiler secara otomatis:

npm menjalankan build

Perintah di atas mengkompilasi kode TypeScript Anda ke dalam JavaScript. Folder yang dibuat berisi dua file; app.js dan app.js.map.

Membuka package.json lagi. Anda akan melihat kunci dalam array bernama utama. Anda dapat melihat bahwa nilainya menunjuk ke index.js. Ganti ini dengan app.js (transpiler) direktori file:

"utama": "./dist/app.js",

Setelah memformat, package.json harus terlihat seperti ini:

Itu saja untuk bagian konfigurasi.

Buat dan Jalankan Permintaan HTTP

Sekarang coba buat dan jalankan permintaan HTTP melalui server Express.js untuk melihat apakah kode Anda dikompilasi sebagaimana mestinya.

Dalam aplikasi.ts:

impor ekspres, {Permintaan, Tanggapan} dari 'cepat'
konstan aplikasi = ekspres()
aplikasi.get('/', async (permintaan: Permintaan, res: Respons)=>{
 konsol.log('Halo Dunia')
 kirim ulang('Halo Dunia')
})
konstan pelabuhan = 8080
app.listen (port, (): ruang kosong=>{
menghibur.catatan(`Aplikasi sedang mendengarkan http://localhost:${pelabuhan}`)
})

Selanjutnya, buka baris perintah ke direktori root proyek Anda dan jalankan dev skrip untuk memulai proyek Anda:

npm menjalankan dev

Buka browser Anda dan pergi ke localhost: 8080, dan Anda akan melihat jawabannya (Halo Dunia). Anda juga akan melihat ini di terminal jika Anda telah menerapkan console.log perintah seperti yang kita lakukan pada contoh di atas.

TypeScript Memiliki Prospek Permintaan Tinggi

Hampir tidak ada banyak perbedaan antara TypeScript dan JavaScript. Tetapi yang pertama memudahkan pengembangan dengan penambahan pengetikan yang ketat.

TypeScript adalah bahasa yang berharga dalam kerangka kerja frontend seperti Angular, dan kami tidak dapat menyangkal kinerja dan skalabilitasnya. Ini menjadi lebih populer, dan prospek pekerjaan untuk pengembang TypeScript terus meningkat.

Pengantar Angular

Baca Selanjutnya

Tentang Penulis