# 🧭 Kenapa TypeScript Layak Dipelajari Lebih Dulu daripada CJS atau ESM

Dalam dunia JavaScript modern, banyak developer pemula bingung: **harus mulai dari mana?** Haruskah memahami dulu CommonJS (CJS), ECMAScript Modules (ESM), atau langsung loncat ke TypeScript?

Jawabannya mungkin mengejutkan:

> **Fokuslah dulu ke TypeScript. CJS dan ESM akan menyusul secara alami.**

Kenapa begitu? Mari kita kupas.

---

## 🎯 1. TypeScript Bukan Sekadar Bahasa, Tapi Cara Berpikir

TypeScript memperkenalkan hal penting yang sering diabaikan oleh JavaScript pemula: **"tipe data penting!"**  
Di JavaScript, kamu bisa menulis kode seperti ini:

```js
function tambah(a, b) {
  return a + b;
}
```

Tapi bagaimana jika `a = 5` dan `b = "10"`? Hasilnya `"510"` — dan ini jadi **sumber bug yang sulit dilacak**.

Dengan TypeScript:

```ts
function tambah(a: number, b: number): number {
  return a + b;
}
```

Kesalahan seperti itu **dicegah sejak awal**, bahkan sebelum kode dijalankan.

---

## 🔥 2. Masalah CJS vs ESM: Tidak Saling Melengkapi

Salah satu dilema yang bikin bingung banyak developer adalah:

* Kalau kamu pakai **CJS (require/module.exports)**, maka kamu **tidak bisa langsung import file ESM**
    
* Kalau kamu pakai **ESM (import/export)**, maka kamu **tidak bisa** `require()` file CJS tanpa trik khusus
    
* Beberapa library lama hanya support CJS, sementara library modern kadang hanya ESM
    
* Ini bikin kamu **terpaksa pilih salah satu jalur**, dan susah bikin sistem yang fleksibel
    

```js
// Error di ESM jika coba require
const fs = require('fs'); // ❌ "require is not defined" (di ESM)

import someLib from 'legacy-cjs-lib'; // ❌ Error jika lib tidak export default
```

---

## 🧠 3. TypeScript Menyederhanakan Dua Dunia Ini

Nah, di sinilah TypeScript menjadi **penengah yang luar biasa**.

Dengan TypeScript:

* Kamu bisa menulis `import` atau `require` sesuai kebutuhan
    
* TypeScript bisa melakukan **resolusi module otomatis**, menyesuaikan dengan setting `compilerOptions`
    
* Kamu bisa mengatur format output: mau `CommonJS` atau `ESModule`
    
* Type declaration tetap bisa dipakai, meskipun berasal dari module lawas
    

Contoh fleksibel:

```ts
// Bisa dua-duanya di TS:
import fs from 'fs'; // ESM-style
const config = require('./config.json'); // CJS-style
```

Dengan sedikit pengaturan (`tsconfig.json`, `esModuleInterop`, dll), kamu bisa:

* **mengimpor library CJS dari kode ESM**
    
* **menggunakan ESM dari project yang tetap dikompilasi ke CJS**
    

Artinya: **TypeScript menjembatani dua dunia yang sebelumnya saling tidak cocok.**

---

## 🌐 4. Ekosistem Modern Sudah TypeScript-First

* Framework modern seperti **Next.js**, **Bun**, **Astro**, **SvelteKit**, **Remix** — semua disusun dengan dukungan TypeScript sejak awal
    
* Library modern seperti React, Prisma, Drizzle, Zod, dan lainnya kini bahkan **hanya mendukung TS untuk DX (developer experience) terbaik**
    
* AI tools seperti Copilot & ChatGPT juga bisa bantu kamu lebih maksimal dengan TypeScript karena tipe dan anotasi eksplisit
    

---

## 📦 5. TypeScript Lebih Dekat ke Masalah Nyata Developer

CJS dan ESM adalah soal **cara mengatur module** — penting, tapi lebih banyak muncul saat konfigurasi.

Sedangkan TypeScript:

* Membantu memahami **struktur data dan relasi antar file**
    
* Memperjelas **kontrak antar fungsi dan komponen**
    
* Memudahkan **refactor** dan scaling tim
    
* Memberi **feedback real-time** saat kamu ngoding
    

---

## ✅ Kesimpulan

> 🎯 CJS dan ESM penting, tapi hanya fondasi teknis.  
> 🛡️ TypeScript adalah alat berpikir, pelindung dari bug, dan jembatan antar dunia JavaScript lama dan baru.  
> 🚀 Pelajari TypeScript lebih dulu, maka kamu akan memahami dan menavigasi CJS & ESM dengan lebih mudah dan stabil.

---

> 💡 **TypeScript bukan hanya “bahasa tambahan”, tapi justru fondasi modern JavaScript development.**