Mengatasi Masalah Union Number dengan Inputan Number di TypeScript

Union number adalah fitur di TypeScript yang memungkinkan Anda mendefinisikan sebuah tipe sebagai kumpulan nilai numerik tertentu. Misalnya, Anda mungkin memiliki sebuah tipe yang hanya menerima angka tertentu, seperti 1 | 2 | 3. Namun, ketika menerima input berupa angka umum (number), Anda perlu memverifikasi apakah angka tersebut sesuai dengan nilai-nilai yang diperbolehkan di dalam union. Artikel ini akan membahas cara mengatasi masalah tersebut.

1. Apa Itu Union Number?

Union number adalah kombinasi tipe numerik yang hanya memperbolehkan nilai tertentu. Contoh:

type AllowedNumbers = 1 | 2 | 3 | 4 | 5;

Pada tipe AllowedNumbers, hanya angka 1, 2, 3, 4, dan 5 yang diizinkan. Namun, jika fungsi Anda menerima input tipe number, Anda perlu memastikan bahwa nilai tersebut adalah bagian dari AllowedNumbers.

2. Pendekatan untuk Memvalidasi Input

Ada beberapa pendekatan yang bisa digunakan untuk memvalidasi input terhadap tipe union number.

2.1 Menggunakan Array.includes

Pendekatan ini menggunakan metode Array.includes untuk memeriksa apakah input ada di dalam daftar nilai yang diizinkan.

type AllowedNumbers = 1 | 2 | 3 | 4 | 5;

function processNumber(input: number): AllowedNumbers | null {
    if ([1, 2, 3, 4, 5].includes(input)) {
        return input as AllowedNumbers;
    }
    return null; // Mengembalikan null jika input tidak valid
}

// Contoh penggunaan
const result = processNumber(3); // Output: 3
const invalidResult = processNumber(10); // Output: null

2.2 Menggunakan Assertion

Jika Anda yakin bahwa input akan valid, Anda dapat menggunakan assertion untuk memastikan tipe. Namun, pendekatan ini hanya aman jika Anda dapat menjamin validitas input.

type AllowedNumbers = 1 | 2 | 3 | 4 | 5;

function assertAllowedNumber(input: number): AllowedNumbers {
    if (![1, 2, 3, 4, 5].includes(input)) {
        throw new Error("Input is not a valid AllowedNumber");
    }
    return input as AllowedNumbers;
}

// Contoh penggunaan
try {
    const safeNumber = assertAllowedNumber(3); // Output: 3
} catch (e) {
    console.error(e); // Jika input tidak valid
}

2.3 Menggunakan Object Mapping dengan `keyof`

Pendekatan ini lebih fleksibel dan aman untuk jumlah nilai yang lebih besar. Anda dapat memanfaatkan objek statis untuk mendefinisikan nilai yang diperbolehkan.

const allowedNumbersMap = {
    1: true,
    2: true,
    3: true,
    4: true,
    5: true,
} as const;

type AllowedNumbers = keyof typeof allowedNumbersMap;

function isAllowedNumber(input: number): input is AllowedNumbers {
    return input in allowedNumbersMap;
}

function processNumber(input: number): AllowedNumbers | null {
    if (isAllowedNumber(input)) {
        return input;
    }
    return null; // Jika input tidak valid
}

// Contoh penggunaan
const validResult = processNumber(3); // Output: 3
const invalidResult = processNumber(10); // Output: null

3. Kapan Menggunakan Pendekatan Tertentu?

Array.includes

Keuntungan: Mudah diimplementasikan dan cukup untuk daftar kecil nilai.
Kelemahan: Tidak optimal untuk daftar nilai yang besar karena memerlukan iterasi setiap kali.

Assertion

Keuntungan: Singkat dan cocok untuk kondisi di mana validitas input sudah dijamin.
Kelemahan: Tidak aman jika input tidak terjamin valid.

Object Mapping dengan `keyof`

Keuntungan: Lebih aman, cepat, dan fleksibel untuk daftar besar nilai.
Kelemahan: Membutuhkan definisi objek tambahan.

4. Kesimpulan

Memvalidasi input terhadap union number di TypeScript adalah langkah penting untuk memastikan tipe data yang konsisten dan aman. Anda dapat memilih pendekatan yang sesuai dengan kebutuhan berdasarkan kompleksitas aplikasi dan jumlah nilai yang diperbolehkan.

Gunakan pendekatan Array.includes untuk kasus sederhana, assertion jika validitas input terjamin, dan object mapping untuk daftar besar nilai. Dengan cara ini, Anda dapat menangani union number dengan lebih efektif dan aman.

Mengatasi Masalah Union Number dengan Inputan Number di TypeScript

Comments

More from this blog

Hermes vs OpenClaw (2026): Mana yang Lebih Baik untuk Developer?

Memahami Protokol Penting untuk Developer Web Modern dan Cloud Infrastructure

Mengapa Banyak Mahasiswa IT Lulus Tetapi Sulit Mendapat Pekerjaan?

OpenNext: Cara Menjalankan Next.js di Mana Saja Tanpa Terkunci Vercel

Jangan Langganan OpenCode Go Sebelum Ambil Bonus $5 Ini

1. Apa Itu Union Number?

2. Pendekatan untuk Memvalidasi Input

2.1 Menggunakan Array.includes

2.2 Menggunakan Assertion

2.3 Menggunakan Object Mapping dengan `keyof`

3. Kapan Menggunakan Pendekatan Tertentu?

Array.includes

Assertion

Object Mapping dengan `keyof`

4. Kesimpulan

Command Palette

Comments

More from this blog

1. Apa Itu Union Number?

2. Pendekatan untuk Memvalidasi Input

2.1 Menggunakan Array.includes

2.2 Menggunakan Assertion

2.3 Menggunakan Object Mapping dengan keyof

3. Kapan Menggunakan Pendekatan Tertentu?

Array.includes

Assertion

Object Mapping dengan keyof

4. Kesimpulan

2.3 Menggunakan Object Mapping dengan `keyof`

Object Mapping dengan `keyof`