🧭 Kenapa TypeScript Layak Dipelajari Lebih Dulu daripada CJS atau ESM

Ariska HidayatAriska Hidayat
3 min read

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.

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