Type Inference, Union Types, dan Optional Properties


 ### **Materi TypeScript Lanjutan: Type Inference, Union Types, dan Optional Properties**

Pada materi ini, kita akan mempelajari beberapa fitur lanjutan dari TypeScript yang sangat berguna dalam menjaga tipe data secara fleksibel namun tetap aman. Fitur-fitur ini meliputi **Type Inference**, **Union Types**, dan **Optional Properties**.

## **1. Type Inference (Inferensi Tipe)**

**Type inference** adalah kemampuan TypeScript untuk secara otomatis menentukan tipe variabel berdasarkan nilai yang diberikan, tanpa kita harus secara eksplisit menuliskan tipe tersebut. TypeScript cukup pintar untuk memahami tipe berdasarkan informasi yang tersedia.

### **Bagaimana Type Inference Bekerja?**

Jika kita mendeklarasikan variabel tanpa memberikan tipe eksplisit, TypeScript akan mengasumsikan tipe berdasarkan nilai yang diinisialisasikan.

#### **Contoh:**

```typescript
let nama = "Budi";  // TypeScript akan otomatis menganggap tipe variabel sebagai `string`
let umur = 21;      // TypeScript menganggap variabel ini bertipe `number`

// Error jika kita mencoba memberikan tipe yang tidak sesuai
umur = "dua puluh satu";  // Error: Type 'string' is not assignable to type 'number'

Dalam contoh di atas, meskipun kita tidak menyebutkan tipe variabel secara eksplisit, TypeScript tahu bahwa `nama` bertipe `string` dan `umur` bertipe `number` berdasarkan nilai awal yang kita berikan.

### **Keuntungan Type Inference:**
- Membantu mengurangi penulisan kode yang berulang, terutama untuk tipe sederhana.
- Meningkatkan produktivitas tanpa mengorbankan keamanan tipe.

## **2. Union Types (Tipe Gabungan)**

**Union types** memungkinkan kita mendefinisikan variabel, parameter, atau properti yang bisa memiliki lebih dari satu tipe. Ini sangat berguna dalam situasi di mana sebuah nilai bisa bervariasi antara dua atau lebih tipe.

### **Penggunaan Union Types:**

Union types didefinisikan menggunakan tanda `|` untuk memisahkan beberapa tipe yang mungkin.

#### **Contoh:**
```typescript
let id: number | string;

id = 101;       // Valid, id bertipe number
id = "A123";    // Valid, id bertipe string

id = true;      // Error: Type 'boolean' is not assignable to type 'number | string'

Dalam contoh di atas, variabel `id` bisa bertipe `number` atau `string`. TypeScript akan menganggap tipe variabel tersebut sebagai **gabungan** antara `number` dan `string`, dan akan memberikan error jika tipe yang diberikan bukan salah satu dari kedua tipe tersebut.

### **Union Types di Parameter Fungsi:**
Union types juga berguna saat kita mendefinisikan fungsi yang bisa menerima berbagai tipe argumen.

#### **Contoh:**
```typescript
function formatId(id: number | string): string {
  return `ID: ${id}`;
}

console.log(formatId(101));   // Output: ID: 101
console.log(formatId("A123")); // Output: ID: A123

Dalam contoh ini, parameter `id` bisa berupa `number` atau `string`, dan fungsi `formatId` tetap bisa bekerja dengan baik tanpa memerlukan overload.

## **3. Optional Properties (Properti Opsional)**

Dalam beberapa kasus, kita mungkin ingin membuat properti pada objek yang tidak selalu ada. **Optional properties** memungkinkan kita mendefinisikan properti pada objek yang tidak harus selalu diisi atau digunakan. TypeScript menandai properti opsional menggunakan tanda `?`.

### **Cara Kerja Optional Properties:**

Optional properties sangat berguna ketika mendesain interface untuk objek yang tidak memerlukan semua data di setiap kasus. Kita bisa menentukan properti yang opsional dan aman digunakan meskipun tidak diisi.

#### **Contoh:**
```typescript
interface User {
  id: number;
  nama: string;
  email?: string;  // Properti opsional
}

let user1: User = {
  id: 1,
  nama: "Budi"
};

let user2: User = {
  id: 2,
  nama: "Tina",
  email: "tina@example.com"
};

Pada contoh di atas:
- `email` adalah properti opsional dalam interface `User`.
- Objek `user1` tidak memiliki properti `email`, namun tetap valid karena properti tersebut opsional.
- Objek `user2` memiliki properti `email`, namun juga tetap valid.

### **Optional Properties di Fungsi:**
Optional properties juga bisa diterapkan pada parameter fungsi. Jika parameter bersifat opsional, TypeScript tidak akan memaksa kita untuk selalu menyediakannya saat memanggil fungsi.

#### **Contoh:**
```typescript
function greet(nama: string, sapaan?: string): string {
  return `${sapaan || "Hello"}, ${nama}!`;
}

console.log(greet("Budi"));            // Output: Hello, Budi!
console.log(greet("Tina", "Hi"));      // Output: Hi, Tina!

Pada contoh di atas, parameter `sapaan` bersifat opsional. Jika tidak diberikan, fungsi akan menggunakan nilai default `"Hello"`.

### **Manfaat Optional Properties:**
- **Fleksibilitas**: Kita bisa mengurangi keharusan menyediakan semua properti, terutama pada objek yang hanya memerlukan beberapa properti berdasarkan kondisi tertentu.
- **Mengurangi Error**: Optional properties membantu menghindari error karena adanya properti yang belum diisi atau diabaikan.

## **Penggunaan Gabungan: Type Inference, Union Types, dan Optional Properties**

Terkadang, fitur-fitur ini digunakan secara bersamaan untuk membuat kode lebih fleksibel namun tetap aman dari kesalahan tipe.

### **Contoh Kasus Gabungan:**

Misalnya kita mendefinisikan sebuah fungsi untuk mencatat aktivitas pengguna di sebuah aplikasi, di mana beberapa data mungkin bersifat opsional atau memiliki tipe yang bervariasi.

```typescript
interface ActivityLog {
  userId: number | string;
  action: string;
  timestamp?: Date;  // Properti opsional
}

function logActivity(log: ActivityLog): void {
  let logTime = log.timestamp ? log.timestamp.toISOString() : new Date().toISOString();
  console.log(`User ${log.userId} melakukan ${log.action} pada ${logTime}`);
}

logActivity({ userId: 101, action: "login" });
logActivity({ userId: "A123", action: "upload", timestamp: new Date() });
```

Pada contoh ini:
- `userId` bisa bertipe `number` atau `string` berkat **Union Types**.
- `timestamp` adalah **optional property**, jadi kita tidak perlu selalu menyediakannya saat mencatat aktivitas.
- **Type inference** digunakan untuk menentukan tipe `logTime` berdasarkan ada atau tidaknya `timestamp`.

## **Kesimpulan**

Ketiga fitur ini — **Type Inference**, **Union Types**, dan **Optional Properties** — merupakan alat yang sangat berguna di TypeScript untuk menulis kode yang lebih fleksibel namun tetap aman dari kesalahan tipe. Dengan fitur-fitur ini, kita bisa menulis kode yang lebih singkat dan intuitif, sambil tetap menjaga keamanan tipe yang menjadi kekuatan utama TypeScript.

Berikut adalah rangkuman cepat:
- **Type Inference**: TypeScript secara otomatis menentukan tipe variabel berdasarkan nilai awal.
- **Union Types**: Variabel atau parameter bisa memiliki lebih dari satu tipe data.
- **Optional Properties**: Properti dalam objek atau parameter fungsi bisa bersifat opsional.

Posting Komentar

Lebih baru Lebih lama

Formulir Kontak