Halo teman-teman semuanya, setelah mengenal apa itu TypeScript dan sudah membuat program hello world pertama, maka kita akan lanjutkan belajar melakukan setup project menggunakan TypeScript. Ini bertujuan agar memudahkan kita dalam proses development, seperti menjalankan compile secara otomatis, mengelola dependensi dan masih banyak lagi.
Langkah 1 - Inisialisasi Project TypeScript
Silahkan teman-teman buat folder baru dengan nama belajar-typescript, setelah itu masuk ke dalam folder tersebut dan jalankan perintah berikut ini di dalam terminal/CMD.
npm init -y
Jika berhasil, maka akan terdapat file baru dengan nama package.json.
Langkah 2 - Installasi & Konfigurasi TypeScript
Sekarang kita akan lanjutkan menginstall TypeScript secara lokal di dalam project. Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam folder project-nya.
npm install --save-dev typescript
Setelah itu, silahkan jalankan perintah berikut ini untuk membuat file konfigurasi dari TypeScript.
tsc --init
Jika berhasil, maka teman-teman akan mendapatkan file baru dengan nama tsconfig.json. File tersebut adalah file konfigurasi dari project TypeScript kita.
Silahkan buka file tsconfig.json, kemudian cari kode berikut ini.
{
"compilerOptions": {
//...
//...
// "rootDir": "./"
// "outDir": "./"
}
}
Dan ubah menjadi seperti berikut ini.
{
"compilerOptions": {
//...
//...
"rootDir": "./src"
"outDir": "./dist"
}
}
Di atas, kita aktifkan rootDir dan outDir dengan cara menghapus comment // di depannya.
Selanjutnya, kita menetapkan rootDir ke folder src, tempat kita menulis kode TypeScript, sedangkan outDir diarahkan ke folder dist, yang akan menampung hasil kompilasi.
Langkah 3 - Struktur Folder Project
Sekarang buatlah struktur folder project yang kurang lebih seperti berikut ini.
belajar-stypescript/
│── src/
│ ├── index.ts
│── dist/
│── package.json
│── tsconfig.json
-
src/: Tempat menyimpan kode TypeScript.
-
dist/: Tempat hasil kompilasi JavaScript.
Langkah 4 - Menjalankan TypeScript Secara Otomatis
Agar lebih efisien dalam belajar, kita bisa menjalankan proses compiling TypeScript secara otomatis, sehingga kita bisa menghemat banyak waktu.
Silahkan teman-teman jalankan perintah berikut ini di dalam project.
npm install --save-dev nodemon
Setelah proses installasi selesai, silahkan buka file package.json, kemudian pada bagian scripstubah kode-nya menjadi seperti berikut ini.
"scripts": {
"build": "tsc",
"start": "nodemon dist/index.js",
"dev": "tsc --watch"
}
Sekarang, silahkan jalankan perintah berikut ini.
npm run dev
Kesimpulan
Pada artikel kali ini kita semua telah belajar bersama-sama bagaimana cara melakukan setup project menggunakan TypeScript.
Pada artikel berikutnya, kita semua akan belajar tentang pengenalan Tipe Data dan Variable di dalam TypeScript.
Terima Kasih