Cara menyiapkan proyek TypeScript + Node.js

Panduan yang sangat singkat ini akan memandu Anda menyiapkan TypeScript dengan proyek Node.js baru (atau yang sudah ada!).

Prasyarat:

• Anda harus agak akrab dengan Node dan JavaScript
• Anda harus menginstal editor kode (sebaiknya VSCode)
• Panduan ini mengasumsikan bahwa Anda menggunakan Linux, MacOS, atau sistem operasi serupa UNIX lainnya.
• Panduan ini juga mengasumsikan Anda menggunakan npm sebagai manajer paket Anda (jangan ragu untuk menggunakan benang, pnpm atau manajer paket pilihan Anda)

• Ini akan menunjukkan kepada Anda cara memulai dengan TypeScript dengan sangat cepat
• Panduan ini juga akan menunjukkan cara menggunakan paket populer seperti nodemon untuk mendukung hot-reloading aplikasi Anda

• TypeScript adalah superset dari JavaScript yang memberi kita pengetikan statis opsional. Itu dibangun oleh Microsoft dan bisa dibilang satu-satunya hal baik yang telah mereka rilis sejak VS Code (hanya bercanda )
• Ini berfungsi sebagai dokumentasi dan mengurangi overhead onboarding dan dengan demikian meningkatkan pengalaman pengembang
• Memungkinkan kami mengidentifikasi bug/masalah dengan cepat sehingga meningkatkan kualitas perangkat lunak secara keseluruhan
• Baca buku pegangan TypeScript untuk detail lebih lanjut

1. Buat direktori dan masuk ke folder yang baru Anda buat

mkdir typescript-example
cd typescript-example

npm init -y

npm install typescript --save-dev

npm install @types/node --save-dev

5. Buat tsconfig.json Anda

npx tsc --init

6. Kompilasi kode Anda menggunakan perintah tsc menggunakan Node package executionr (npx) .

npx tsc

Meningkatkan pengalaman pengembang lokal Anda

1. Hot reload — ini akan sangat meningkatkan dev ex Anda, karena akan memungkinkan aplikasi Anda untuk melakukan hot reload pada perubahan langsung. Kami dapat mengatur ini melalui Nodemon di aplikasi Node.js kami.

npm install --save-dev ts-node nodemon

Di atas harus cukup untuk dengan cepat mengatur proyek TypeScript + Node secara lokal. Anda dapat meningkatkan ini lebih lanjut dengan:

• Gunakan linter: gunakan sesuatu seperti ESLint . Ini adalah alat analisis kode statis yang memungkinkan kita menetapkan standar di seluruh kode kita. Kami dapat menggunakan ini untuk menerapkan standar dan pola pengkodean untuk basis kode kami.
• Perkenalkan alat penghapusan mendalam: Rimraf untuk menghapus file yang tidak diinginkan sebelum mendorong ke produksi
• Tambahkan bundler modul statis: gunakan webpack (atau turbopack). Ini mungkin akan berlebihan untuk proyek kecil — tetapi karena skala aplikasi Anda, Anda perlu mekanisme untuk mengelola semua JS/TS Anda .
• Otomasi — bagaimana Anda dapat mengotomatiskan hal di atas untuk bisnis Anda?