Tutorial TypeScript #7: Enum dan Tuple


Tutorial TypeScript #7: Enum dan Tuple

Halo teman-teman semuanya, pada artikel sebelumnya kita telah belajar tentang Literal Type di dalam TypeScript dan pada artikel ini, kita akan membahas cara kerja Enum dan Tuple serta bagaimana menggunakannya dalam project TypeScript.

Dalam TypeScript, Enum dan Tuple adalah dua fitur yang membantu dalam pengelolaan data dengan cara yang lebih terstruktur dan aman.

  • Enum digunakan untuk mendefinisikan sekumpulan nilai tetap (constant) yang lebih mudah dibaca.
  • Tuple digunakan untuk membuat array dengan panjang dan tipe elemen yang sudah ditentukan.

1. Enum di TypeScript

Enum digunakan untuk mendefinisikan sekumpulan nilai tetap yang memiliki arti lebih jelas dibandingkan angka atau string biasa.

  • Enum dengan Nilai Default (Numeric Enum)

    Secara default, Enum di TypeScript menggunakan angka sebagai nilai awalnya, dimulai dari 0.

    enum Role {
      Admin, // 0
      User,  // 1
      Guest  // 2
    }
    
    let userRole: Role = Role.Admin;
    console.log(userRole); // Output: 0
    
    • Role.Admin otomatis memiliki nilai 0, Role.User adalah 1, dan seterusnya.

    • Jika kita memanggil console.log(Role.User), hasilnya adalah 1.

  • Enum dengan Nilai yang Ditentukan

    Kita juga bisa menentukan nilai untuk setiap enum secara manual.

    enum Status {
      Success = 200,
      NotFound = 404,
      ServerError = 500
    }
    
    console.log(Status.Success); // Output: 200
    console.log(Status["NotFound"]); // Output: 404
    

    Success memiliki nilai 200, NotFound adalah 404, dan ServerError adalah 500.

  • Enum dengan String Values

    Selain angka, kita juga bisa menggunakan string dalam Enum agar lebih mudah dibaca.

    enum PaymentStatus {
      Pending = "PENDING",
      Success = "SUCCESS",
      Failed = "FAILED"
    }
    
    let statusTransaksi: PaymentStatus = PaymentStatus.Success;
    console.log(statusTransaksi); // Output: SUCCESS
    

    String Enum lebih baik digunakan jika kita ingin hasil output yang lebih mudah dibaca.

2. Tuple di TypeScript

Tuple memungkinkan kita menyimpan beberapa nilai dalam satu array dengan tipe data yang telah ditentukan untuk setiap elemennya.

  • Tuple Sederhana

    let user: [string, number];
    
    user = ["Fika", 25]; // ✅ Valid
    // user = [25, "Fika"]; // ❌ Error: Tipe tidak sesuai
    
    console.log(user[0]); // Output: Fika
    console.log(user[1]); // Output: 25
    
    • Elemen pertama harus string, dan elemen kedua harus number.

    • Jika urutan atau tipe data tidak sesuai, TypeScript akan memberikan error.

  • Tuple dengan Label yang Lebih Jelas

    Untuk meningkatkan keterbacaan, kita bisa menambahkan destructuring.

    let person: [string, number] = ["Fika", 30];
    
    let [nama, umur] = person;
    console.log(nama); // Output: Fika
    console.log(umur); // Output: 30
    

    Kita bisa langsung mendestruktur tuple ke dalam variabel nama dan umur.

  • Tuple dengan Optional Element

    let mahasiswa: [string, number, string?];
    
    mahasiswa = ["Budi", 21]; // ✅ Valid
    mahasiswa = ["Budi", 21, "Teknik Informatika"]; // ✅ Valid
    // mahasiswa = [21, "Budi"]; // ❌ Error
    

    Elemen ketiga bersifat opsional, jadi bisa diisi atau tidak.

  • Tuple dengan Rest Parameter (...)

    Kita bisa menggunakan rest parameter untuk membuat tuple yang lebih fleksibel.

    let colors: [number, ...string[]];
    
    colors = [1, "red", "green", "blue"];
    console.log(colors); // Output: [ 1, 'red', 'green', 'blue' ]
    

    Elemen pertama harus number, tetapi setelahnya bisa berisi banyak string.

Kesimpulan

Pada artikel kali ini, kita telah mempelajari:

  • Enum untuk mendefinisikan sekumpulan nilai tetap yang lebih mudah dipahami.
  • Tuple untuk menyimpan beberapa nilai dengan tipe yang sudah ditentukan.
  • Menggunakan rest parameter dalam tuple untuk fleksibilitas yang ebih tinggi.

Pada artikel berikutnya, kita semua akan belajar tentang Class dan Object-Oriented Programming (OOP) di dalam TypeScript.

Terima Kasih


Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami