Modul & Organisasi Kode

Seiring berkembangnya proyek TypeScript Anda, menjadi sangat penting untuk membagi kode Anda ke dalam beberapa file. TypeScript mendukung sistem ES Module modern, yang merupakan standar untuk pengembangan web dan Node.js.

Ekspor & Impor

Anda dapat mengekspor variabel, fungsi, interface, atau kelas dari sebuah file menggunakan kata kunci export.

// math-utils.ts
export const PI = 3.14;

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

export default class Kalkulator {
  // ...
}

Untuk menggunakannya di file lain, gunakan kata kunci import:

// app.ts
import Kalkulator, { tambah, PI } from "./math-utils";

console.log(tambah(10, PI));

Impor Tipe Saja (Import Type)

Fitur hebat dari TypeScript adalah kemampuan untuk mengimpor hanya tipenya saja. Ini memastikan bahwa tidak ada kode JavaScript yang dihasilkan untuk impor tersebut, yang dapat meningkatkan performa dan menghindari masalah ketergantungan melingkar (circular dependency).

import type { User } from "./models";

Namespace

Sebelum sistem ES Module menjadi standar, TypeScript menggunakan Namespace untuk mengorganisir kode. Meskipun Modul sekarang lebih disukai, Anda mungkin masih akan menemui Namespace dalam proyek lama atau saat menulis file definisi (.d.ts).

namespace Validation {
  export interface StringValidator {
    isAcceptable(s: string): boolean;
  }

  export const numberRegexp = /^[0-9]+$/;
}

Mana yang harus Anda gunakan?

Selalu gunakan ES Modules (import/export) untuk proyek modern. Namespace terutama digunakan untuk kode lama atau kebutuhan struktural tertentu dalam satu file. Modul memberikan isolasi yang lebih baik, dukungan perkakas (tooling) yang lebih baik, dan merupakan standar dalam ekosistem JavaScript.

Praktik Terbaik Struktur Proyek

1. Satu fitur per file: Jaga agar file tetap kecil dan terfokus.
2. Gunakan Indeks Folder: Buat file index.ts dalam folder untuk “mengekspor ulang” semuanya agar impor lebih bersih.
3. Barrel Export:

   // components/index.ts
   export * from "./Button";
   export * from "./Input";

   Kemudian Anda dapat mengimpor seperti: import { Button, Input } from "./components";