Tutorial TypeScript #2: Setup Project TypeScript

• Langkah 1 - Inisialisasi Project TypeScript
• Langkah 2 - Installasi & Konfigurasi TypeScript
• Langkah 3 - Struktur Folder Project
• Langkah 4 - Menjalankan TypeScript Secara Otomatis
• Kesimpulan

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