Perbedaan Type dan Interface di TypeScript

TypeScript adalah superset dari JavaScript. TypeScript menawarkan cara bagi kita untuk mendefinisikan suatu tipe data dalam kode JavaScript yang kita buat.

Ketika bekerja dengan TypeScript, kita harus mendefinisikan struktur objek atau tipe data, dan di sini kita akan bertemu dengan dua fitur utama: type dan interface.

Jika kita lihat sekilas, mereka sangat mirip. Namun masing-masing mempunyai ciri khas tersendiri, baik dari cara penggunaan, fleksibilitar maupun performanya.

Pada artikel kali ini kita akan mempelajari apa saja perbedaan antara type dan interface, yang nantinya dapat membantu kalian dalam mengembangkan aplikasi.

Berikut merupakan contoh perbandingan type & interface.

interface Animal {
  name: string
}

interface Bear extends Animal {
  honey: boolean
}

const bear = getBear()
bear.name
bear.honey

type Animal = {
  name: string
}

type Bear = Animal & {
  honey: boolean
}

const bear = getBear();
bear.name;
bear.honey;

Penjelasan Mengenai “type”

Di TypeScript, type digunakan untuk mendefinisikan tipe data kompleks dengan mengkombinasikan berbagai macam tipe, seperti tipe primitif, union, intersection, tuple, dan tipe lainnya.

Fitur Penting type

• Union & Intersection type: kita dapat mendefinisikan dan mengkombinasikan satu tipe dengan tipe yang lain.
• Primitive: type dapat digunakan untuk mendefinisikan tipe primitif seperti numbers, strings, boolean.
• Array & Tuple: kita juga dapat menggunakan type untuk mendefinisikan sebuah tuple atau array secara spesifik.
• Dapat merepresentasikan type yg lebih complex, seperti conditional type atau mapped type

Contoh penggunaan type:

// union type
type Color = "red" | "green" | "blue";

// primitive type
type Age = number;

// function type
type SumFunction = (a: number, b: number) => number;

// tuple type
type DataTypes = [number, string];

// object type
type User = {
  name: string;
  age: number;
};

// conditional type
interface Animal {}
interface Dog extends Animal {}

type Ex1 = Dog extends Animal ? number : string; // type of Ex1 = number
type Ex2 = RegExp extends Animal ? number : string; // type of Ex2 = string

Gunakan type ketika:

1. Ketika ingin mengkombinasikan berbagai macam tipe data menggunakan union atau intersection.
2. Ketika ingin menggunakan tipe data yg kompleks seperti function atau tuple.
3. Ketika ingin merepresentasikan tipe data primitif.

Penjelasan Mengenai “interface”

Sebuah interface di TypeScript digunakan untuk mendefinisikan strukur sebuah objek. Hal utama yg sering digunakan yaitu untuk menentukan bentuk sebuah objek atau kelas, baik dari property maupun methods.

Tidak seperti type, sebuah interface lebih di fokuskan untuk rancangan object oriented pada kode yang kita buat.

Fitur Penting interface

• Object Shape: digunakan untuk mendefine atau menentukan struktur suatu object dan class.
• Extensibility: kita dapat extend interface yg lain, sehingga dapat memungkinkan untuk penggunaan inheritance & composition.
• Declaration Merging: Jika Anda mendefinisikan interface dengan nama yang sama beberapa kali, TypeScript akan menggabungkannya menjadi satu interface.

// Define the shape of an object
interface User {
  name: string;
  age: number;
}

// Extending interfaces
interface Admin extends User {
  role: string;
}

// Implementation of the interface in a class
class Person implements User {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

Gunakan interface ketika:

1. Ketika bekerja dengan object atau class.
2. Ketika memerlukan adanya extensibility dan inheritance.
3. Ketika ingin menggunakan declaration merging, dimana interface kita definisikan beberapa kali.

Tabel Perbandingan

Berikut tabel praktis perbandingan type vs interface

Kesimpulan

Baik type maupun interface, keduannya memiliki kelebihan masing-masing. Secara umum interface kita gunakan saat kita ingin menentukan bentuk dan tipe data sebuah object, sedangkan type digunakan untuk menentukan tipe data yang lebih kompleks seperti union, intersection, primitive, dll.

Dengan mengetahui perbedaan antara type dan interface dapat membantu kita sebagai developer dalam menentukan pilihan kita nantinya saat mengembangkan proyek yang dibuat.

Meskipun perbedaannya mungkin terlihat tidak terlalu besar, memilih yang tepat dapat membuat kode Anda lebih terstruktur dan mudah untuk dipelihara.