Tutorial TypeScript #5: Interface dan Type Alias

• 1. Interface
  • Contoh Interface
  • Menambahkan Optional Property (?)
  • Interface dengan Function
• 2. Type Alias
  • Contoh Type Alias
  • Type Alias dengan Union Type
  • Type Alias dengan Function
• 3. Perbedaan Interface dan Type Alias
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita telah belajar tentang Function dan Parameter di dalam TypeScript, maka pada artikel ini, kita akan membahas perbedaan antara interface dan type alias, serta bagaimana cara menggunakannya di dalam project TypeScript.

Dalam TypeScript, kita bisa menggunakan interface dan type alias untuk mendefinisikan struktur data dengan lebih jelas. Kedua fitur ini sangat berguna saat bekerja dengan object agar memiliki bentuk yang konsisten.

1. Interface

Interface digunakan untuk mendefinisikan bentuk sebuah object, termasuk properti dan tipe datanya.

Contoh Interface

interface User {
  name: string;
  age: number;
  isAdmin: boolean;
}

const user1: User = {
  name: "Fika",
  age: 25,
  isAdmin: true,
};

console.log(user1.name); // Output: Fika

User adalah interface yang mendefinisikan bahwa object harus memiliki name, age, dan isAdmin dengan tipe data tertentu. Jika salah satu properti hilang atau memiliki tipe yang salah, TypeScript akan memberikan error.

• Menambahkan Optional Property (?)

  interface Product {
    name: string;
    price: number;
    description?: string; // Optional property
  }
  
  const product1: Product = {
    name: "Laptop",
    price: 15000000,
  };
  
  console.log(product1.description); // Output: undefined (karena tidak diisi)
  

  description bersifat opsional, jadi object tetap valid meskipun tidak memilikinya.

• Interface dengan Function

  Interface juga bisa mendefinisikan function dalam object.

  interface Person {
    name: string;
    greet(): string;
  }
  
  const person1: Person = {
    name: "Fika",
    greet() {
      return `Halo, saya ${this.name}`;
    },
  };
  
  console.log(person1.greet()); // Output: Halo, saya Fika
  

  Function greet harus ada di dalam object dan mengembalikan string.

2. Type Alias

type juga digunakan untuk mendefinisikan struktur data, mirip dengan interface, tetapi lebih fleksibel.

Contoh Type Alias

type Animal = {
  name: string;
  age: number;
};

const cat: Animal = {
  name: "Milo",
  age: 2,
};

Sama seperti interface, type juga mendefinisikan struktur object.

• Type Alias dengan Union Type

  Keunggulan type alias adalah bisa menggabungkan beberapa tipe data menggunakan union (|).

  type ID = string | number;
  
  let userId: ID;
  userId = 123; // ✅ Valid
  userId = "abc123"; // ✅ Valid
  // userId = true; // ❌ Error: boolean tidak sesuai dengan ID
  

  userId bisa berupa string atau number, tetapi tidak bisa berupa boolean.

• Type Alias dengan Function

  Kita juga bisa menggunakan type untuk mendefinisikan function.

  type Add = (a: number, b: number) => number;
  
  const add: Add = (x, y) => x + y;
  
  console.log(add(10, 5)); // Output: 15
  

  Add adalah type alias untuk function yang menerima dua angka dan mengembalikan angka.

3. Perbedaan Interface dan Type Alias

Jika hanya mendefinisikan struktur object, gunakan interface. Jika perlu lebih fleksibel, gunakan type alias.

Kesimpulan

Dalam artikel ini, kita telah mempelajari Interface untuk mendefinisikan object secara ketat, kemudian Type Alias yang lebih fleksibel karena mendukung union type dan Perbedaan utama antara Interface dan Type Alias.

Pada artikel berikutnya, kita semua akan belajar tentang Literal type di dalam TypeScript.

Terima Kasih