Perbedaan Types dan Interfaces Pada Typescript

 

Typescript adalah bahasa lanjutan dari bahasa javascript, perbedaannya terletak pada kemampuan typescript yang jauh lebih strict dalam mengidentifikasi tipe data pada sebuah variabel dan parameter. Jadi kita tidak boleh sembarangan dalam memasukkan nilai pada sebuah variabel

Secara sederhana kita bisa menentukan type pada variable di typescript dengan cara berikut

let name: string = "indra";

Namun apa jadinya kalo kita ingin membuat sebuah object yang berisi banyak sekali property. Tentu ini akan merepotkan dan menjadikan kode terlihat tidak rapih

const student: {
  name: string;
  age: number;
  isGraduated: boolean;
  action: () => void;
} = {
  name: "Indra",
  age: 25,
  isGraduated: true,
  action: () => console.log("walk...."),
};

Disinilah kita membutuhkan interface atau types. Dimana kita tidak perlu lagi menuliskan type setelah variabel berkali kali. Cukup tinggal tulisan nama types dan interfacesnya saja

Sekilas penggunaan types dan interface itu mirip sekali. Dua duanya mempunyai fungsi yang sama, yang membedakan adalah kapan kita harus menggunakannya

Types dirancang bisa kita pakai atau tidak kita pakai. Penggunaannya mirip sekali seperti variabel. Dan kita bebas menggunakannya untuk berbagai keperluan, bahkan sesederhana membuat type pada satu buah variabel seperti ini

type Person = string;
const person: Person = "indra";

Sedangkan Interface harus kita gunakan acap kali membuat sebuah object

Dari kode object di atas berkaitan dengan student. Ada dua cara mengimplementasikannya

Pertama, menggunakan Types

type Student = {
  name: string;
  age: number;
  isGraduated: boolean;
  action: () => void;
};

const student: Student = {
  name: "Indra",
  age: 25,
  isGraduated: true,
  action: () => console.log("walk...."),
};

console.log(student.name);

Kedua, menggunakan Interface

interface Student {
  name: string;
  age: number;
  isGraduated: boolean;
  action: () => void;
}

const student: Student = {
  name: "Indra",
  age: 25,
  isGraduated: true,
  action: () => console.log("walk...."),
};

console.log(student.name);

Kesimpulan

Itulah bagaimana kita menggunakan interface dan type pada typescript. Semoga bermanfaat

Post a Comment

Previous Post Next Post