🧭 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:
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 khususBeberapa 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
ataurequire
sesuai kebutuhanTypeScript bisa melakukan resolusi module otomatis, menyesuaikan dengan setting
compilerOptions
Kamu bisa mengatur format output: mau
CommonJS
atauESModule
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.
Subscribe to my newsletter
Read articles from Ariska Hidayat directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by

Ariska Hidayat
Ariska Hidayat
I am an enthusiastic researcher and developer with a passion for using technology to innovate in business and education.