Cara Membuat dan Menggunakan Modul TypeScript

Modul TypeScript menawarkan pendekatan terstruktur untuk mengatur dan mengelola kode. Modul memungkinkan enkapsulasi kode ke dalam file terpisah, yang meningkatkan kemudahan perawatan, penggunaan ulang, dan pengujian. Panduan ini menjelaskan proses pembuatan dan penggunaan modul TypeScript.

Apa itu Modul TypeScript?

Modul TypeScript adalah file individual yang mengekspor dan mengimpor elemen kode seperti kelas, fungsi, dan variabel. Dengan menggunakan modul, kode dapat dipecah menjadi beberapa bagian yang mudah dikelola, sehingga memudahkan kontrol yang lebih baik atas interaksi antara berbagai bagian kode.

Membuat Modul TypeScript

Untuk membuat modul TypeScript, langkah-langkah berikut harus diikuti:

1. Buat file TypeScript: Mulailah dengan membuat file `.ts` baru untuk modul, seperti `mathUtils.ts`.
2. Tentukan dan ekspor kode: Terapkan fungsi, kelas, atau variabel dalam file ini dan gunakan kata kunci export untuk membuatnya tersedia untuk modul lain.

Contoh modul sederhana:

// mathUtils.ts

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

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

Dalam contoh ini, fungsi `add` dan `subtract` didefinisikan dan diekspor dari modul `mathUtils.ts`.

Mengimpor dan Menggunakan Modul TypeScript

Untuk memanfaatkan kode dari modul TypeScript di berkas lain, kode tersebut harus diimpor. Ini melibatkan:

1. Buat file TypeScript baru: Buat file tempat kode modul akan digunakan, seperti `app.ts`.
2. Impor modul: Gunakan kata kunci import untuk memasukkan fungsi, kelas, atau variabel dari modul.

Contoh mengimpor dan menggunakan fungsi `add` dan `subtract`:

// app.ts

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

const sum = add(5, 3);
const difference = subtract(5, 3);

console.log(`Sum: ${sum}`);
console.log(`Difference: ${difference}`);

Dalam contoh ini, fungsi `add` dan `subtract` diimpor dari modul `mathUtils` dan digunakan dalam file `app.ts`.

Ekspor Default dan Bernama

Modul TypeScript mendukung ekspor default dan ekspor bernama. Berikut ini ikhtisar singkatnya:

• Ekspor Default: Nilai tunggal dapat diekspor sebagai ekspor default dari modul menggunakan export default.
• Ekspor Bernama: Beberapa nilai dapat diekspor dari modul menggunakan ekspor bernama dengan kata kunci export.

Contoh yang menunjukkan kedua jenis ekspor:

// shapes.ts

export default class Circle {
  constructor(public radius: number) {}
  
  area(): number {
    return Math.PI * this.radius ** 2;
  }
}

export function getCircleInfo(radius: number): string {
  const circle = new Circle(radius);
  return `A circle with radius ${radius} has an area of ${circle.area()}`;
}

Dalam contoh ini, `Circle` diekspor sebagai ekspor default, sementara `getCircleInfo` adalah ekspor bernama.

Mengorganisasikan Modul dalam Sebuah Proyek

Untuk proyek yang lebih besar dengan banyak modul, pengorganisasian menjadi sangat penting. Pertimbangkan kiat-kiat berikut:

• Struktur Direktori: Kelompokkan modul terkait ke dalam direktori seperti `models/`, `services/`, dan `utils/`.
• File Indeks: Gunakan file `index.ts` dalam direktori untuk menggabungkan dan mengekspor ulang modul, menyederhanakan impor di seluruh proyek.

Contoh struktur direktori:

project/
│
├── src/
│   ├── models/
│   │   ├── index.ts
│   │   └── user.ts
│   └── app.ts

Kesimpulan

Modul TypeScript merupakan fitur utama untuk mengatur dan mengelola kode. Dengan membuat dan menggunakan modul, kode dapat dibuat modular, mudah dipelihara, dan dapat diskalakan. Memahami cara mengekspor dan mengimpor kode, serta cara menyusun proyek, akan meningkatkan efektivitas pengembangan TypeScript.