moduleimportexportMenengah3 mnt baca

Module, Import, dan Export

export dan import antar file, plus import type agar tipe tidak bocor ke runtime.

Setiap File Adalah Module

File .ts yang punya import atau export di tingkat atas otomatis menjadi module: isinya tidak bocor ke global scope. Ini perilaku default yang sehat.

typescript
// file: pengguna.ts
export interface Pengguna {
  id: number;
  nama: string;
}

export function buatPengguna(nama: string): Pengguna {
  return { id: Date.now(), nama };
}

const internal = "tidak bisa diimport"; // tanpa export = privat file

Mengimpor

typescript
// file: app.ts
import { Pengguna, buatPengguna } from "./pengguna";

const ana: Pengguna = buatPengguna("Ana");

Path relatif ./pengguna tanpa ekstensi adalah konvensi. Untuk default export, sintaksnya import buatPengguna from "./pengguna", tapi named export lebih disukai karena mendukung rename saat import dan lebih ramah refactoring.

import type: Tipe Saja, Tanpa Runtime

Ini praktik penting di project modern:

typescript
import type { Pengguna } from "./pengguna";
import { buatPengguna } from "./pengguna";

import type menjamin yang diimport hanya dipakai sebagai tipe dan dihapus total saat kompilasi. Kenapa penting? Bundler seperti Vite/Next.js kadang tidak bisa membedakan import tipe dari import value, lalu menyisakan import hantu yang bikin error atau circular dependency di runtime.

Re-export: Barrel File

typescript
// file: models/index.ts
export type { Pengguna } from "./pengguna";
export type { Produk } from "./produk";

Barrel file mengumpulkan export dari banyak file jadi satu pintu import: import type { Pengguna, Produk } from "./models". Rapi untuk folder dengan banyak tipe.

Catatan teknis: Aktifkan verbatimModuleSyntax: true di tsconfig (atau minimal isolatedModules) agar compiler memaksa import type untuk semua import yang hanya dipakai sebagai tipe. Tanpa ini, kesalahan import tipe vs value baru ketahuan saat build atau bahkan di production.