Cara Setup Project TypeScript dengan Node.js

Pendahuluan

Bayangkan kamu sedang membangun sebuah rumah. Jika menggunakan JavaScript b biasa, kamu membangun tanpa cetak biru — langsung pasang bata, dan baru tah tahu ada masalah ketika temboknya sudah setengah jadi. Dengan TypeScript, k kamu punya cetak biru lengkap sejak awal: tahu persis berapa banyak bata ya yang dibutuhkan, di mana letaknya, dan apa yang akan terjadi jika ada yang  tidak sesuai.

TypeScript adalah superset dari JavaScript yang menambahkan sistem tipe sta statis. Artinya, kesalahan bisa terdeteksi saat kamu menulis kode — bukan s saat aplikasi sudah berjalan di hadapan pengguna. Ini sangat berguna jika k kamu ingin membangun aplikasi backend yang robust menggunakan Node.js.

Dalam artikel ini, kamu akan belajar cara menyiapkan project TypeScript den dengan Node.js dari nol. Tidak perlu pengalaman sebelumnya dengan TypeScrip TypeScript — kita akan mulai dari langkah paling dasar. Sebelum melanjutkan melanjutkan, pastikan kamu sudah familiar dengan konsep dasar JavaScript da dan cara kerja terminal/command line.

Konsep Dasar

Sebelum terjun langsung ke kode, ada beberapa konsep penting yang perlu kam kamu pahami.

Mengapa TypeScript di Node.js?

Node.js secara default menggunakan JavaScript. Namun, semakin besar sebuah  project, semakin sulit untuk melacak tipe data dari setiap variabel dan fun fungsi. TypeScript hadir untuk menyelesaikan masalah ini.

Bayangkan kamu sedang membangun layanan backend seperti yang ada di balik a aplikasi Tokopedia — ratusan endpoint API, ribuan baris kode, dan puluhan d developer yang bekerja bersama. Tanpa TypeScript, sangat mudah terjadi kesa kesalahan kecil seperti mengirim string padahal fungsi mengharapkan numb number`. TypeScript akan langsung memberi tahu kamu sebelum kode dijalanka dijalankan.

Alur Kerja TypeScript di Node.js

Node.js tidak bisa langsung menjalankan file TypeScript (.ts). Kamu p perlu melakukan langkah kompilasi terlebih dahulu:

File .ts → Kompilasi (tsc) → File .js → Dijalankan Node.js

Ada juga tools seperti ts-node yang memungkinkan kamu menjalankan TypeScr TypeScript secara langsung tanpa langkah kompilasi manual — sangat berguna  saat pengembangan.

Perangkat yang Dibutuhkan

Sebelum mulai, pastikan kamu sudah menginstal:

1. Node.js (versi 18 ke atas direkomendasikan) — bisa diunduh di nodejs nodejs.org
2. npm — biasanya sudah terinstal bersama Node.js
3. Editor kode — VS Code sangat direkomendasikan karena dukungan TypeSc TypeScript-nya yang luar biasa

Cek apakah Node.js sudah terinstal:

# Cek versi Node.js yang terpasang
node --version

# Cek versi npm yang terpasang
npm --version

# Output yang diharapkan:
# > v20.11.1
# > 10.2.4

Jika keduanya menampilkan nomor versi, berarti siap untuk melanjutkan!

Contoh Kode

Mari kita mulai membangun project TypeScript dengan Node.js langkah demi la langkah.

Langkah 1: Buat Folder Project

# Membuat folder baru untuk proyek TypeScript
mkdir project-typescript-nodejs

# Masuk ke folder proyek yang baru dibuat
cd project-typescript-nodejs

# Menampilkan lokasi folder proyek saat ini
pwd

# Output yang diharapkan:
# > /path/ke/project-typescript-nodejs

Langkah 2: Inisialisasi Project Node.js

# Buat file package.json dengan pengaturan default
npm init -y > /dev/null

# Pasang TypeScript sebagai dependency untuk pengembangan
npm install typescript --save-dev > /dev/null

# Buat file TypeScript sederhana
echo 'const pesan: string = "Halo, TypeScript!"; console.log(pesan);' > hel
hello.ts

# Compile TypeScript menjadi JavaScript
npx tsc hello.ts

# Jalankan hasil compile dengan Node.js
node hello.js

# Output yang diharapkan:
# > Halo, TypeScript!

Perintah ini akan membuat file package.json secara otomatis. File ini ada adalah “identitas” project kamu — berisi nama project, versi, dan daftar de dependensi.

Langkah 3: Install TypeScript

# Instal TypeScript dan tipe bawaan Node.js sebagai dependency development
npm install --save-dev typescript @types/node

# Cek versi TypeScript untuk memastikan instalasi berhasil
npx tsc --version

# Output yang diharapkan:
# > added ... packages
# > Version ...

Penjelasan:

• typescript — compiler TypeScript itu sendiri
• @types/node — definisi tipe untuk built-in module Node.js (seperti fs fs, path, http, dll.)
• --save-dev — berarti package ini hanya dibutuhkan saat pengembangan, bu bukan saat produksi

Langkah 4: Buat File Konfigurasi TypeScript

TypeScript membutuhkan file konfigurasi bernama tsconfig.json. Kamu bisa  membuatnya secara otomatis:

# Buat file konfigurasi TypeScript bernama tsconfig.json
npx tsc --init

# Output yang diharapkan:
# > Wrote to .../package.json
# > Created a new tsconfig.json

Setelah perintah ini dijalankan, akan muncul file tsconfig.json dengan ba banyak opsi (sebagian besar di-comment). Untuk project Node.js pemula, guna gunakan konfigurasi yang lebih sederhana seperti ini. Hapus isi file terseb tersebut dan ganti dengan:

{
  "# komentar": "Konfigurasi dasar TypeScript untuk proyek pemula.",
  "compilerOptions": {
    "# target": "Mengubah TypeScript menjadi JavaScript versi ES2020.",
    "target": "ES2020",

    "# module": "Menggunakan sistem module CommonJS, cocok untuk Node.js.",
Node.js.",
    "module": "commonjs",

    "# lib": "Menyediakan fitur bawaan JavaScript ES2020.",
    "lib": ["ES2020"],

    "# rootDir": "Folder tempat file TypeScript ditulis.",
    "rootDir": "./src",

    "# outDir": "Folder hasil kompilasi JavaScript.",
    "outDir": "./dist",

    "# strict": "Mengaktifkan pengecekan tipe yang lebih ketat.",
    "strict": true,

    "# esModuleInterop": "Memudahkan import package CommonJS.",
    "esModuleInterop": true,

    "# skipLibCheck": "Melewati pengecekan tipe pada file library agar komp
kompilasi lebih cepat.",
    "skipLibCheck": true,

    "# forceConsistentCasingInFileNames": "Mencegah masalah perbedaan huruf
huruf besar/kecil pada nama file.",
    "forceConsistentCasingInFileNames": true
  },
  "# include": "File TypeScript yang akan dikompilasi.",
  "include": ["src/**/*"],
  "# exclude": "Folder yang tidak perlu dikompilasi.",
  "exclude": ["node_modules", "dist"],

  "# Output yang diharapkan:": "",
  "# > npx tsc": "",
  "# > File JavaScript berhasil dibuat di folder dist": ""
}

Penjelasan setiap opsi penting:

Untuk penjelasan lebih dalam tentang setiap opsi di tsconfig.json, kamu b bisa membaca [Tutorial Konfigurasi tsconfig.json untuk Pemula](/docs/sw/typK PemulaPemula](/docs/sw/typscript/tutorial-konfigurasi-tsconfigjson-untuk-pemula) yang membahas topik ini secara lebih detail.

Langkah 5: Buat Struktur Folder

# Membuat folder bernama src untuk menyimpan file TypeScript
mkdir -p src

# Menampilkan pesan bahwa folder berhasil dibuat
echo "Folder src berhasil dibuat"

# Output yang diharapkan:
# > Folder src berhasil dibuat

Struktur project kamu sekarang akan terlihat seperti ini:

project-typescript-nodejs/
├── src/              ← file TypeScript kamu di sini
├── node_modules/
├── package.json
└── tsconfig.json

Langkah 6: Tulis Kode TypeScript Pertama

Buat file src/index.ts:

// src/index.ts

// Membuat bentuk data pengguna dengan interface
interface Pengguna {
  id: number;
  nama: string;
  email: string;
  aktif: boolean;
}

// Fungsi menerima data bertipe Pengguna dan mengembalikan string
function sambut(pengguna: Pengguna): string {
  // Jika akun tidak aktif, tampilkan pesan khusus
  if (!pengguna.aktif) {
    return `Akun ${pengguna.nama} tidak aktif.`;
  }

  return `Halo, ${pengguna.nama}! Selamat datang di KamusNgoding.`;
}

// Data contoh dengan tipe Pengguna
const pengguna: Pengguna = {
  id: 1,
  nama: "Budi Santoso",
  email: "[email protected]",
  aktif: true,
};

// Memanggil fungsi dan menyimpan hasilnya
const pesan = sambut(pengguna);
console.log(pesan);

// Array yang hanya boleh berisi data bertipe Pengguna
const daftarPengguna: Pengguna[] = [
  { id: 1, nama: "Budi", email: "[email protected]", aktif: true },
  { id: 2, nama: "Siti", email: "[email protected]", aktif: false },
  { id: 3, nama: "Andi", email: "[email protected]", aktif: true },
];

// Mengambil hanya pengguna yang aktif
const penggunaAktif = daftarPengguna.filter((p) => p.aktif);
console.log(`Pengguna aktif: ${penggunaAktif.length} orang`);

/*
# Output yang diharapkan:
# > Halo, Budi Santoso! Selamat datang di KamusNgoding.
# > Pengguna aktif: 2 orang
*/

Langkah 7: Tambahkan Script di package.json

Buka package.json dan tambahkan script berikut:

{
  "# nama_paket": "Nama project Node.js + TypeScript",
  "name": "project-typescript-nodejs",
  "version": "1.0.0",
  "main": "dist/index.js",
  "scripts": {
    "# build": "Mengubah file TypeScript di folder src menjadi JavaScript d
di folder dist",
    "build": "tsc",
    "# start": "Menjalankan hasil build dari folder dist",
    "start": "node dist/index.js",
    "# dev": "Menjalankan TypeScript langsung saat belajar",
    "dev": "ts-node src/index.ts"
  },
  "devDependencies": {
    "# types_node": "Menambahkan tipe bawaan Node.js untuk TypeScript",
    "@types/node": "^22.0.0",
    "# ts_node": "Menjalankan file TypeScript tanpa build manual",
    "ts-node": "^10.9.2",
    "# typescript": "Compiler utama untuk TypeScript",
    "typescript": "^5.0.0"
  },
  "# Output yang diharapkan:": "",
  "# > npm run dev": "",
  "# > Hello, TypeScript!": ""
}

Langkah 8: Install ts-node untuk Development

ts-node memungkinkan kamu menjalankan file TypeScript langsung tanpa komp kompilasi manual — sangat menghemat waktu saat pengembangan:

# Pasang TypeScript dan ts-node sebagai development dependency
npm install --save-dev typescript ts-node >/dev/null 2>&1

# Cek apakah ts-node berhasil terpasang
node -e "require('ts-node'); console.log('ts-node siap digunakan')"

# Output yang diharapkan:
# > ts-node siap digunakan

Langkah 9: Jalankan Project

Untuk development (langsung jalankan TypeScript):

# Jalankan server pengembangan untuk proyek TypeScript
npm run dev

# Output yang diharapkan:
# > Server berjalan di http://localhost:5173
# > Siap menerima perubahan kode

Output yang diharapkan:

Halo, Budi Santoso! Selamat datang di KamusNgoding.
Pengguna aktif: 2 orang

Untuk production (kompilasi dulu, lalu jalankan JavaScript):

# Buat project TypeScript sederhana
mkdir belajar-typescript && cd belajar-typescript

# Inisialisasi project Node.js
npm init -y --silent

# Install TypeScript sebagai dependency development
npm install typescript --save-dev --silent

# Buat folder untuk kode TypeScript
mkdir src

# Buat file TypeScript utama
cat > src/index.ts <<'EOF'
const nama: string = "TypeScript";

console.log(`Halo, ${nama}!`);
console.log("Selamat datang di KamusNgoding!");
EOF

# Compile TypeScript menjadi JavaScript
npx tsc

# Jalankan hasil compile dengan Node.js
node dist/index.js

# Output yang diharapkan:
# > Halo, TypeScript!
# > Selamat datang di KamusNgoding!

Pertanyaan yang Sering Diajukan

Apa perbedaan antara npm install dan npm install --save-dev?

npm install digunakan untuk dependensi yang dibutuhkan saat aplikasi berj berjalan di production (seperti express atau axios). Sedangkan npm ins install --save-dev untuk dependensi yang hanya dibutuhkan saat pengembanga pengembangan, seperti typescript dan ts-node. Saat deploy ke server, ka kamu bisa menjalankan npm install --production untuk melewati instalasi d dependensi development dan menghemat ruang disk.

Mengapa saya perlu @types/node?

Node.js ditulis dalam JavaScript, sehingga tidak memiliki informasi tipe ba bawaan untuk TypeScript. Package @types/node berisi file definisi tipe ( (.d.ts) yang memberi tahu TypeScript tentang tipe dari semua fungsi dan o objek built-in Node.js, seperti http.IncomingMessage, fs.readFile`, dan  sebagainya. Tanpa ini, TypeScript tidak akan “mengenali” API milik Node.js. Node.js.

Apakah saya harus selalu menggunakan ts-node saat development?

Tidak harus, tapi sangat direkomendasikan karena lebih praktis. Alternatif  lain adalah menggunakan mode --watch dari TypeScript compiler: npx tsc - --watch. Ini akan mengkompilasi otomatis setiap kali ada perubahan file, t tapi kamu tetap perlu menjalankan node dist/index.js secara terpisah. Ban Banyak developer juga menggunakan nodemon bersama ts-node agar server o otomatis restart saat file berubah.

Apa itu strict: true di tsconfig.json dan apakah harus diaktifkan?

strict: true mengaktifkan sekelompok pemeriksaan tipe yang lebih ketat, t termasuk strictNullChecks (mencegah bug akibat null atau undefined) d dan noImplicitAny (memaksa kamu mendefinisikan tipe secara eksplisit). Un Untuk project baru, sangat direkomendasikan mengaktifkan ini sejak awal kar karena jauh lebih mudah daripada mengaktifkannya di tengah project yang sud sudah besar.

Bisakah saya menggunakan TypeScript dengan framework seperti Express?

Tentu saja! Kamu hanya perlu menambahkan tipe untuk Express: npm install e express lalu npm install --save-dev @types/express. Setelah itu kamu bis bisa langsung menulis kode Express dengan dukungan TypeScript penuh, termas termasuk autocomplete dan pengecekan tipe untuk request dan response object object.

Kesimpulan

Kamu telah berhasil menyiapkan project TypeScript dengan Node.js dari nol!  Berikut ringkasan langkah-langkah yang sudah kita pelajari:

1. Inisialisasi project dengan npm init -y
2. Install TypeScript dan @types/node sebagai devDependencies
3. Buat tsconfig.json dengan konfigurasi yang sesuai untuk Node.js
4. Atur struktur folder dengan memisahkan source (src/) dan output ( (dist/`)
5. Install ts-node untuk kemudahan development
6. Tulis kode TypeScript dengan tipe yang jelas dan aman
7. Jalankan project menggunakan npm run dev atau build terlebih dahul dahulu

Dengan fondasi ini, kamu sudah siap untuk membangun aplikasi Node.js yang l lebih besar dan lebih mudah dipelihara. Langkah selanjutnya yang bisa kamu  eksplorasi adalah menambahkan framework seperti Express, menggunakan databa database, atau mempelajari fitur TypeScript yang lebih canggih.

Selamat belajar dan terus berlatih! Kamu sudah mengambil langkah yang tepat tepat dengan belajar TypeScript sejak awal — investasi ini akan sangat terb terbayar saat project kamu semakin besar. Jika ada pertanyaan, jangan ragu  untuk eksplorasi artikel-artikel lainnya di KamusNgoding!