Memahami Modules dan Namespace dalam TypeScript untuk Proyek Modular

Dalam pengembangan aplikasi modern, terutama yang berskala besar, pengorganisasian kode menjadi hal yang sangat penting. Menumpuk semua fungsi, class, dan variabel dalam satu file akan membuat proyek sulit dikelola serta rawan konflik antar nama variabel atau fungsi. Inilah mengapa dalam tutorial kali ini kita akan membahas fitur Modules dan Namespace dalam TypeScript untuk membantu developer membangun struktur kode yang lebih modular, terorganisir, dan mudah dipelihara.

Modules TypeScript memungkinkan kita memisahkan kode ke dalam berbagai file dengan sistem import dan export, sedangkan Namespace digunakan untuk mengelompokkan kode dalam satu ruang lingkup agar tidak terjadi bentrok antar nama. Kedua konsep ini memberikan fleksibilitas tinggi bagi developer untuk membuat proyek yang scalable, mudah dibaca, dan efisien dalam kolaborasi tim.

Apa Itu Modules TypeScript?

Modules TypeScript adalah cara untuk memecah kode menjadi beberapa file agar lebih terstruktur. Setiap file yang memiliki ekspor (export) atau impor (import) dianggap sebagai sebuah module.

Dengan sistem ini, kita dapat memisahkan logika kode menjadi bagian-bagian kecil yang saling terhubung, mirip seperti potongan puzzle yang membentuk aplikasi utuh.

Contoh dasar module:
File: mathUtils.ts

export function add(a: number, b: number): number {
  return a + b;
}

export function subtract(a: number, b: number): number {
  return a - b;
}

File: app.ts

import { add, subtract } from "./mathUtils";

console.log("Penjumlahan:", add(10, 5));
console.log("Pengurangan:", subtract(10, 5));

Pada contoh di atas, file mathUtils.ts mengekspor dua fungsi, sementara app.ts mengimpornya dan menggunakannya. Dengan konsep ini, setiap file bisa berperan sesuai fungsinya tanpa tumpang tindih dengan file lain.

Jenis Ekspor dan Impor dalam TypeScript

1. Named Export & Import

Kita dapat mengekspor beberapa elemen dari satu file.

// utils.ts
export const PI = 3.14;
export function multiply(a: number, b: number) {
  return a * b;
}

// main.ts
import { PI, multiply } from "./utils";
console.log(PI, multiply(2, 3));

2. Default Export & Import

Untuk mengekspor satu nilai utama dari sebuah file, gunakan export default.

// greeter.ts
export default function greet(name: string) {
  return `Halo, ${name}!`;
}

// app.ts
import greet from "./greeter";
console.log(greet("Arvian"));

3. Import Semua Ekspor

Jika ingin mengimpor semua ekspor dari satu file ke dalam satu objek:

import * as MathUtils from "./mathUtils";
console.log(MathUtils.add(4, 5));

Pendekatan ini sangat berguna saat Anda ingin mengelompokkan semua fungsi dari satu module dalam satu namespace lokal.

Struktur Proyek Modular

Menggunakan Modules TypeScript memungkinkan kita membangun proyek dengan struktur folder yang rapi dan mudah dikelola.

Contoh struktur proyek modular:

src/
├── models/
│   ├── user.ts
│   └── product.ts
├── services/
│   ├── userService.ts
│   └── productService.ts
├── utils/
│   └── helper.ts
└── app.ts

Setiap folder memiliki tanggung jawab spesifik:

• models/ → berisi definisi tipe dan class data

• services/ → berisi logika bisnis atau API handler

• utils/ → berisi fungsi umum yang digunakan di berbagai tempat

Dengan pendekatan modular seperti ini, kolaborasi antar developer menjadi lebih mudah dan perubahan pada satu bagian tidak akan merusak bagian lain.

Apa Itu Namespace?

Sebelum module menjadi standar, TypeScript menyediakan Namespace untuk mengelompokkan kode dalam satu file atau beberapa file tanpa menggunakan sistem import/export. Namespace bekerja seperti “container” untuk kode agar nama-nama variabel atau fungsi tidak saling bertabrakan.

Contoh penggunaan Namespace:

namespace MathTools {
  export function add(a: number, b: number): number {
    return a + b;
  }

  export function multiply(a: number, b: number): number {
    return a * b;
  }
}

console.log(MathTools.add(5, 10));

Perhatikan bahwa setiap fungsi di dalam namespace perlu menggunakan keyword export agar bisa diakses dari luar. Jika tidak, fungsi tersebut hanya bisa digunakan di dalam namespace itu sendiri.

Perbedaan Modules dan Namespace

Aspek	Modules	Namespace
Cara kerja	Berdasarkan sistem file (import/export)	Dikelompokkan dalam satu file
Dukungan standar	Didukung secara native oleh ES6	Hanya TypeScript (tidak di JavaScript)
Kegunaan utama	Struktur proyek besar & modern	Pengelompokan internal di satu file
Kemudahan pemeliharaan	Lebih mudah untuk aplikasi besar	Kurang cocok untuk proyek skala besar

Saat ini, Modules lebih direkomendasikan karena kompatibel dengan JavaScript modern dan ekosistem build tools seperti Webpack, Vite, dan ESBuild. Namespace tetap berguna untuk aplikasi kecil atau script yang tidak memerlukan sistem import/export.

Contoh Kombinasi Module dan Namespace

Meskipun jarang digunakan bersama, kombinasi keduanya bisa diterapkan dalam kasus tertentu, misalnya ketika ingin menggabungkan beberapa fungsi utilitas dalam satu namespace, lalu mengekspornya sebagai satu module.

// mathToolkit.ts
export namespace MathToolkit {
  export function square(x: number): number {
    return x * x;
  }

  export function cube(x: number): number {
    return x * x * x;
  }
}

Kemudian di file lain:

import { MathToolkit } from "./mathToolkit";
console.log(MathToolkit.square(3));

Dengan cara ini, kita tetap mendapatkan keuntungan namespace sebagai pengelompok internal, sekaligus fleksibilitas modules untuk ekspor lintas file.

Kesimpulan

Modules TypeScript dan Namespace adalah dua cara utama untuk mengelola kode agar lebih terstruktur dan modular.

• Modules digunakan untuk membagi kode ke dalam file terpisah menggunakan import dan export.

• Namespace digunakan untuk mengelompokkan fungsi atau class dalam satu ruang lingkup agar tidak bentrok nama.

Dalam proyek modern, penggunaan Modules TypeScript lebih disarankan karena mengikuti standar ECMAScript dan didukung penuh oleh tool build modern. Dengan pemahaman yang baik tentang kedua konsep ini, Anda dapat membangun proyek TypeScript yang efisien, bersih, dan mudah dikembangkan dalam jangka panjang.