Lewati ke konten
TypeScript Guidebook

Constructor

Tujuan Pembelajaran

Section titled “Tujuan Pembelajaran”

Setelah membaca halaman ini, kamu diharapkan dapat:

  • Menjelaskan fungsi dari constructor dalam class.
  • Membuat constructor untuk menerima argumen inisialisasi data.
  • Menggunakan fitur Parameter Properties di TypeScript untuk menyingkat penulisan constructor.

Pendahuluan

Section titled “Pendahuluan”

Pada halaman sebelumnya, setelah membuat objek dengan new Handphone(), kita harus mengisi propertinya satu per satu secara manual:

📄 TypeScript
const hp = new Handphone();
hp.merk = "Xiaomi";
hp.ramGB = 8;

Cara ini tidak efisien jika kita ingin membuat banyak objek. Di dalam OOP, kita bisa mengirimkan data awal langsung di dalam tanda kurung instansiasi new Handphone("Xiaomi", 8). Fitur yang menangani hal ini disebut Constructor.

Penjelasan Materi: Apa itu Constructor?

Section titled “Penjelasan Materi: Apa itu Constructor?”

Constructor adalah method khusus di dalam class yang akan dijalankan secara otomatis oleh sistem komputer tepat ketika objek baru sedang dicetak (diinstansiasi menggunakan kata kunci new).

Sintaks penulisan di TypeScript:

📄 TypeScript
class Siswa {
  nama: string;


  constructor(namaSiswa: string) {
    this.nama = namaSiswa; // mengisi data saat objek dibuat
  }
}

Constructor ditulis menggunakan nama method khusus yaitu constructor (huruf kecil semua).

Analogi Kehidupan Sehari-hari: Proses Membangun Rumah

Section titled “Analogi Kehidupan Sehari-hari: Proses Membangun Rumah”

Bayangkan ketika kamu mendatangi kontraktor pembangunan rumah. Kontraktor tidak membangun rumah kosong polos, lalu mengecatnya belakangan setelah jadi.

Saat tanda tangan kontrak, kamu memberikan pesanan: “Saya ingin rumah dicat warna Biru dan memiliki 3 kamar tidur.”

🖥️ Output
Argumen constructor = Warna Biru, 3 Kamar Tidur

Tukang bangunan akan langsung mengecat warna biru dan langsung membuat 3 kamar tidur selama proses pembangunan berlangsung. Begitu rumah jadi (objek selesai di-new), warna dindingnya sudah biru dan kamarnya sudah ada 3.

Visual Illustration: Alur Kerja Constructor

Section titled “Visual Illustration: Alur Kerja Constructor”
🖥️ Output
Mulai Instansiasi: new Siswa("Putra")
        │
        ▼
Panggil method constructor("Putra") secara otomatis
        │
        ▼
Di dalam constructor: this.nama = "Putra"
        │
        ▼
Objek selesai dibuat dengan property nama berisi "Putra"

Mari Mencoba: Constructor Standar

Section titled “Mari Mencoba: Constructor Standar”

Mari kita buat class yang memanfaatkan constructor untuk menginisialisasi nilai properti.

Buat file bernama src/bab8/constructor-standar.ts:

📄 TypeScript
class SiswaAkademik {
  nama: string;
  nilai: number;


  // Mendefinisikan constructor
  constructor(namaAwal: string, nilaiAwal: number) {
    console.log(`[Constructor]: Sedang membuat objek siswa ${namaAwal}...`);
    this.nama = namaAwal;
    this.nilai = nilaiAwal;
  }


  cetakInfo(): void {
    console.log(`Siswa: ${this.nama} | Nilai: ${this.nilai}`);
  }
}


// Membuat objek sekaligus mengirim data ke constructor
const siswa1 = new SiswaAkademik("Putra Ramadhan", 85);
const siswa2 = new SiswaAkademik("Dewi Rahayu", 78);


console.log("\n--- INFO SISWA ---");
siswa1.cetakInfo();
siswa2.cetakInfo();

Jalankan dengan perintah:

🖥️ Output
tsx src/bab8/constructor-standar.ts

Output

Section titled “Output”
🖥️ Output
[Constructor]: Sedang membuat objek siswa Putra Ramadhan...
[Constructor]: Sedang membuat objek siswa Dewi Rahayu...


---


INFO SISWA ---
Siswa: Putra Ramadhan | Nilai: 85
Siswa: Dewi Rahayu | Nilai: 78

Fitur Keren TypeScript: Parameter Properties

Section titled “Fitur Keren TypeScript: Parameter Properties”

TypeScript memiliki fitur singkat yang sangat disukai programmer: Parameter Properties. Kita bisa mendeklarasikan property sekaligus parameter constructor hanya dengan satu baris menggunakan access modifier (seperti public atau private):

📄 TypeScript
// Jauh lebih singkat!
class Siswa {
  constructor(public nama: string, public nilai: number) {}
}

TypeScript otomatis membuat property nama dan nilai di luar constructor, lalu memasukkan nilainya secara otomatis. Tidak perlu lagi menulis this.nama = nama di dalam tubuh constructor.

Kesalahan yang Sering Terjadi

Section titled “Kesalahan yang Sering Terjadi”

❌ Mengirim jumlah argumen yang salah ke constructor

Section titled “❌ Mengirim jumlah argumen yang salah ke constructor”
📄 TypeScript
const siswaA = new SiswaAkademik("Putra"); // Error!
// Expected 2 arguments, but got 1.

Perbaikan: Sesuaikan argumen yang dikirim di dalam tanda kurung new Class(...) dengan parameter yang dideklarasikan di dalam constructor.

Tips

Section titled “Tips”

Latihan

Section titled “Latihan”
  1. Buat class bernama Buku menggunakan gaya Parameter Properties singkat TypeScript dengan properti: judul (string) dan harga (number).
  2. Buat tiga objek buku baru dengan harga berbeda-beda.
  3. Cetak total harga seluruh buku menggunakan operator penjumlahan biasa.

Ringkasan

Section titled “Ringkasan”
  • Constructor adalah method khusus yang dijalankan otomatis saat objek dibuat.
  • Ditulis menggunakan nama constructor.
  • Berguna untuk menginisialisasi nilai awal properti objek.
  • Parameter Properties di TypeScript mempermudah penulisan constructor menjadi satu baris singkat.