Belajar TypeScript - Namespace, Modul, dan Import/Export Tipe

#Pendahuluan

Kode yang serba satu file cepat menjadi tidak terawat. Episode 10 membahas cara membagi program menjadi modul, unit kode yang saling mengimpor, dan cara mengekspor tipe beserta nilai. Organisasi ini menentukan apakah proyek bisa tumbuh atau mati karena jalinan yang kusut.

TypeScript mendukung dua sistem organisasi: modul ES modern yang menjadi standar, dan namespace yang kini lebih sering dipakai untuk deklarasi lingkungan global. Memahami keduanya, plus kapan memakai masing-masing, adalah bagian dari kedewasaan sebagai developer TypeScript.

Episode 10 mengupas sintaks import dan export, import dan export khusus tipe agar tetap aman dengan compiler modern, serta konfigurasi module di tsconfig.

#Modul ES Modern

#import dan export

Setiap file dengan pernyataan import atau export adalah modul:

export interface Pengguna {
    nama: string;
}
 
export const versi = "1.0.0";
 
export function sapa(nama: string): string {
    return `Halo, ${nama}`;
}

File di atas mengekspor interface, konstanta, dan fungsi. Modul lain mengimpornya dengan kata kunci import. Dengan modul, setiap file punya lingkup sendiri; hanya simbol yang diekspor yang bisa dipakai di luar file.

Impor di file lain

import { Pengguna, sapa } from "./pengguna";
 
const pengguna: Pengguna = { nama: "Budi" };
console.log(sapa(pengguna.nama));

Kata kunci from "./pengguna" merujuk jalur file tanpa ekstensi. Compiler dan bundler menyelesaikan jalur tersebut saat build. Impor bernama membuat dependensi eksplisit dan mudah ditelusuri.

#Default Export

Modul juga bisa mengekspor satu nilai utama dengan export default:

export default class ApiClient {
    constructor(private baseUrl: string) {}
}

Impor default tidak memakai kurung kurawal. Setiap modul hanya boleh punya satu default export. Pola ini umum untuk komponen, class utama, atau fungsi tunggal yang menjadi inti sebuah file.

#Import dan Export Khusus Tipe

TypeScript memisahkan nilai dan tipe. Ini memungkinkan import yang hanya untuk tipe:

import type { Pengguna } from "./pengguna";
 
const data: Pengguna = { nama: "Sari" };

Deklarasi import type menyatakan bahwa hanya tipe yang dibawa masuk, bukan nilai runtime. Saat kompilasi, import ini dihapus seluruhnya. Ini penting untuk compiler dengan isolatedModules dan untuk menghemat ukuran bundle.

Penulisan inline juga didukung untuk kejelasan:

import { sapa, type Pengguna } from "./pengguna";

Di baris yang sama, sapa diimpor sebagai nilai dan Pengguna sebagai tipe. Pola ini ringkas dan jelas, banyak dipakai di codebase modern.

#Namespace

#Namespace untuk Deklarasi Ambient

Namespace mengelompokkan simbol dalam satu lingkup global:

namespace Utilitas {
    export function formatAngka(n: number): string {
        return n.toLocaleString("id-ID");
    }
 
    export const satuan = "IDR";
}

Namespace menempatkan fungsi dan konstanta dalam satu nama Utilitas. Dulu ini cara utama mengorganisir kode. Saat ini, modul ES lebih disukai untuk kode aplikasi karena bekerja lebih baik dengan bundler dan memaksa eksplisit impor.

#Kapan Namespace Masih Relevan

Namespace tetap berguna untuk file deklarasi lingkungan, terutama saat mengetikkan variabel global:

declare namespace GlobalNya {
    interface Config {
        apiKey: string;
    }
}

Blok declare namespace mendeskripsikan bentuk objek global tanpa membuat kode runtime. Pola ini dipakai oleh banyak library klasik dan deklarasi ambient. Untuk aplikasi yang kalian tulis sendiri, preferensi utama tetap modul ES.

#Konfigurasi Module di tsconfig

Perilaku kompilasi modul diatur dari tsconfig:

{
    "compilerOptions": {
        "module": "NodeNext",
        "moduleResolution": "NodeNext"
    }
}

Opsi module menentukan format output JavaScript, misalnya NodeNext untuk Node.js dan ESNext untuk bundler modern. Opsi moduleResolution menentukan cara compiler mencari file impor. Keduanya harus cocok dengan lingkungan runtime yang dipakai.

#Penutup

Episode 10 membuat kode kalian terorganisir: modul ES untuk kode aplikasi, import dan export khusus tipe untuk keamanan compiler modern, serta namespace untuk deklarasi ambient. Kalian juga memahami pengaturan module di tsconfig.

Inti yang harus dibawa pulang:

• File dengan import atau export adalah modul dengan lingkup sendiri.
• export default menyediakan satu nilai utama per modul.
• import type menghapus import tipe saat kompilasi.
• Inline type import mencampur nilai dan tipe dalam satu baris.
• Namespace kini terutama untuk deklarasi ambient global.
• module dan moduleResolution harus cocok dengan runtime.

Di episode 11 selanjutnya kita akan membahas type guards, narrowing, dan kontrol alur tipe, yaitu cara mempersempit tipe union menjadi tipe konkret dengan aman di dalam percabangan.