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:

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:

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

// 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:

// 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.

🧭 Kenapa TypeScript Layak Dipelajari Lebih Dulu daripada CJS atau ESM