Masukkan Password
48 Apa itu Interface
1. Apa itu Interface?
Secara sederhana:
Interface adalah sebuah kontrak/blueprint yang menentukan seperti apa bentuk sebuah object atau class.
Transcript menyebut interface sebagai blueprint atau contract yang mendefinisikan struktur object dan membantu TypeScript memastikan object tersebut mengikuti struktur yang ditentukan.
Bayangkan kita membuat aturan untuk sebuah User.
Kita ingin setiap User memiliki:
firstNamelastNamegreetUser()getFullName()
Kita bisa membuat kontraknya:
interface User {
firstName: string;
lastName: string;
greetUser(): void;
getFullName(): string;
}
Perhatikan sesuatu yang sangat penting:
Interface hanya mengatakan “harus punya apa”, bukan “bagaimana cara membuatnya”.
2. Interface hanya berisi deklarasi
Ini konsep paling penting dalam materi ini.
Misalnya:
interface User {
firstName: string;
lastName: string;
}
Artinya:
“Siapa pun yang mengikuti interface
User, harus mempunyaifirstNamebertipestringdanlastNamebertipestring.”
Tetapi kita tidak memberikan nilai di dalam interface.
❌ Salah:
interface User {
firstName: string = "John";
}
Kenapa?
Karena interface bukan tempat untuk memberikan implementasi atau nilai awal.
Yang benar:
interface User {
firstName: string;
}
Transcript juga menekankan bahwa property di interface hanya berupa declaration dan tidak boleh diinisialisasi dengan nilai.
3. Bagaimana dengan method?
Sama.
Interface boleh menentukan bahwa sebuah method harus ada.
Misalnya:
interface User {
firstName: string;
lastName: string;
greetUser(): void;
getFullName(): string;
}
Interface mengatakan:
User harus punya method
greetUser()yang returnvoid.
dan:
User harus punya method
getFullName()yang returnstring.
Tetapi interface tidak menentukan isi method tersebut.
Jadi ini ❌ salah:
interface User {
greetUser(): void {
console.log("Hello");
}
}
Karena kita memberikan implementation.
Yang benar:
interface User {
greetUser(): void;
}
Jadi gampangnya:
INTERFACE
Apa yang harus ada?
↓
DECLARATION
Bukan:
Bagaimana cara kerjanya?
↓
IMPLEMENTATION
Transcript menjelaskan bahwa method pada interface hanya berisi deklarasi, termasuk return type dan parameter jika diperlukan.
4. Interface bisa digunakan sebagai Type
Ini bagian yang sangat penting.
Misalnya kita punya:
interface User {
firstName: string;
lastName: string;
greetUser(): void;
getFullName(): string;
}
Kemudian:
let user1: User;
Artinya:
Variable
user1harus berisi sesuatu yang mengikuti strukturUser.
Misalnya kita coba:
user1 = {
firstName: "John",
lastName: "Smith"
};
Akan error.
Kenapa?
Karena User meminta:
firstName
lastName
greetUser()
getFullName()
Sedangkan object kita hanya punya:
firstName
lastName
Belum punya dua method tersebut.
5. Object harus memenuhi seluruh kontrak
Supaya benar:
user1 = {
firstName: "John",
lastName: "Smith",
greetUser() {
console.log("Hello user");
},
getFullName() {
return this.firstName + " " + this.lastName;
}
};
Sekarang cocok.
Karena object tersebut mempunyai semua yang diminta oleh interface:
User
│
├── firstName: string ✓
├── lastName: string ✓
├── greetUser(): void ✓
└── getFullName(): string ✓
Transcript menunjukkan konsep yang sama: ketika object diberikan kepada variable bertipe User, object tersebut harus mempunyai seluruh property dan method yang didefinisikan interface.
6. Interface tidak bisa dibuat menjadi object secara langsung
Misalnya:
interface User {
firstName: string;
}
Kita tidak bisa melakukan:
const user = new User();
❌ Error.
Kenapa?
Karena interface bukan class.
Interface hanya merupakan kontrak untuk type checking.
Bandingkan:
Class
class User {
firstName: string;
constructor(firstName: string) {
this.firstName = firstName;
}
}
const user = new User("John");
Bisa.
Karena User adalah class yang bisa menghasilkan object.
Interface
interface User {
firstName: string;
}
Tidak bisa:
const user = new User();
Karena interface tidak menghasilkan object.
Transcript juga secara eksplisit menjelaskan bahwa interface tidak dapat di-instansiasi.
7. Analogi paling mudah: Interface = kontrak kerja
Bayangkan sebuah perusahaan membuat kontrak:
Setiap karyawan harus memiliki:
- nama
- method
work()
Perusahaan tidak peduli bagaimana setiap orang bekerja.
Kontraknya:
interface Employee {
name: string;
email: string;
work(): void;
}
Sekarang:
class Developer implements Employee {
name: string;
email: string;
work() {
console.log("Coding...");
}
}
Developer memenuhi kontrak.
Orang lain juga bisa:
class Designer implements Employee {
name: string;
email: string;
work() {
console.log("Designing...");
}
}
Keduanya berbeda cara kerja:
Developer
↓
work() → Coding
Designer
↓
work() → Designing
Tetapi keduanya memenuhi kontrak:
Employee
│
├── name
├── email
└── work()
Inilah kekuatan interface.
8. implements pada class
Nah, ini bagian yang sangat penting dari transcript.
Kita bisa meminta sebuah class untuk mengikuti interface menggunakan:
implements
Contoh:
interface User {
firstName: string;
lastName: string;
greetUser(): void;
getFullName(): string;
}
Kemudian:
class Admin implements User {
...
}
Artinya:
Adminwajib memenuhi kontrakUser.
Jadi TypeScript akan memastikan Admin memiliki:
firstName
lastName
greetUser()
getFullName()
Transcript menggunakan Admin dan Member sebagai contoh class yang mengimplementasikan interface User.
9. Contoh lengkap Admin
Misalnya:
interface User {
firstName: string;
lastName: string;
greetUser(): void;
getFullName(): string;
}
Kemudian:
class Admin implements User {
constructor(
public firstName: string,
public lastName: string
) {}
greetUser() {
console.log(`Hello admin ${this.getFullName()}`);
}
getFullName() {
return this.firstName + " " + this.lastName;
}
}
Perhatikan.
Interface meminta:
firstName
lastName
greetUser()
getFullName()
Maka Admin menyediakan semuanya.
10. Bagaimana dengan Member?
Kita bisa membuat class lain:
class Member implements User {
constructor(
public firstName: string,
public lastName: string
) {}
greetUser() {
console.log(`Hello member ${this.getFullName()}`);
}
getFullName() {
return this.firstName + " " + this.lastName;
}
}
Sekarang kita punya:
User Interface
│
┌───────┴───────┐
↓ ↓
Admin Member
│ │
↓ ↓
greetUser() greetUser()
getFullName() getFullName()
Keduanya punya struktur yang diwajibkan User.
Tetapi implementasinya bisa berbeda.
11. Inilah alasan interface sangat powerful
Sekarang bayangkan kita mempunyai function:
function displayGreetMessage(user: User) {
user.greetUser();
}
Perhatikan parameter:
user: User
Bukan:
user: Admin
dan bukan:
user: Member
Artinya function tersebut berkata:
“Saya tidak peduli kamu Admin atau Member. Yang penting kamu memenuhi kontrak
User.”
Maka:
const admin = new Admin("John", "Smith");
const member = new Member("Mary", "Jane");
displayGreetMessage(admin);
displayGreetMessage(member);
Keduanya valid.
Karena:
Admin implements User
↓
memenuhi User
↓
boleh dikirim ke function
Member implements User
↓
memenuhi User
↓
boleh dikirim ke function
Transcript menunjukkan tepat konsep ini: function menerima parameter bertipe interface sehingga instance dari class mana pun yang mengimplementasikan interface tersebut dapat dikirimkan.
12. Ini disebut polymorphism secara sederhana
Meskipun materi ini fokus pada interface, sebenarnya kita sudah melihat ide polymorphism.
Function:
function displayGreetMessage(user: User) {
user.greetUser();
}
Tidak perlu tahu apakah:
user
adalah Admin.
atau:
user
adalah Member.
Function cukup tahu:
“Object ini memiliki
greetUser().”
Maka:
displayGreetMessage(admin);
akan menjalankan:
Admin.greetUser()
Sedangkan:
displayGreetMessage(member);
akan menjalankan:
Member.greetUser()
Jadi satu function bisa bekerja dengan banyak jenis object selama mereka mengikuti kontrak yang sama.
13. Kesalahan kecil pada contoh transcript: getFullName
Transcript menunjukkan output awal:
hello admin John Smith
hello member
Kemudian diperbaiki dengan menambahkan tanda () ketika memanggil getFullName().
Ini penting untuk dipahami.
Ada perbedaan:
this.getFullName
dengan:
this.getFullName()
Tanpa ()
this.getFullName
Artinya kita mengambil function-nya.
Dengan ()
this.getFullName()
Artinya kita menjalankan function tersebut.
Misalnya:
getFullName() {
return this.firstName + " " + this.lastName;
}
Maka:
console.log(this.getFullName);
kurang lebih akan mereferensikan function.
Sedangkan:
console.log(this.getFullName());
menghasilkan:
John Smith
Ini konsep dasar JavaScript/TypeScript yang sangat penting.
14. Class boleh punya property/method tambahan
Interface tidak berarti class harus hanya memiliki isi interface.
Misalnya:
interface User {
firstName: string;
lastName: string;
greetUser(): void;
getFullName(): string;
}
Kemudian:
class Admin implements User {
firstName: string;
lastName: string;
age: number = 30;
greetUser() {
console.log("Hello admin");
}
getFullName() {
return this.firstName + " " + this.lastName;
}
}
age tidak ada di interface.
Tidak masalah.
Karena interface menentukan minimum requirement, bukan batas maksimum.
Jadi:
Interface User
↓
HARUS punya:
├── firstName
├── lastName
├── greetUser()
└── getFullName()
Admin
↓
Punya semua di atas
+
├── age
├── method lain
└── property lain
Transcript juga menjelaskan bahwa class boleh mempunyai property dan method miliknya sendiri di luar yang diwajibkan interface.
15. Satu class bisa implement banyak interface
Ini juga menarik.
Misalnya:
interface User {
firstName: string;
lastName: string;
}
interface Role {
role: string;
}
Satu class bisa:
class Admin implements User, Role {
firstName: string;
lastName: string;
role: string;
}
Artinya Admin harus memenuhi dua kontrak:
User
/ \
firstName lastName
+
Role
|
role
↓
Admin
Transcript menyebut bahwa sebuah class dapat mengimplementasikan multiple interfaces dengan memisahkannya menggunakan koma.
16. Interface vs Type
Transcript juga menyinggung:
Bukankah
typejuga bisa digunakan untuk mendefinisikan bentuk object?
Betul.
Contoh:
type User = {
firstName: string;
lastName: string;
greetUser(): void;
getFullName(): string;
};
Ini memang bisa digunakan sebagai type.
Secara sederhana:
interface User {
firstName: string;
lastName: string;
}
dan:
type User = {
firstName: string;
lastName: string;
};
keduanya bisa digunakan untuk mendeskripsikan bentuk object.
Tetapi dalam materi ini, interface ditekankan terutama untuk mendefinisikan kontrak yang kemudian diimplementasikan oleh class.
Contohnya:
class Admin implements User
Ini adalah penggunaan interface yang menjadi fokus materi.
17. Interface vs Abstract Class
Ini salah satu pertanyaan yang sangat sering muncul.
“Kalau interface dan abstract class sama-sama bisa menentukan method yang harus dibuat child class, apa bedanya?”
Perbedaan paling penting menurut materi:
Interface
Hanya deklarasi.
interface User {
name: string;
greet(): void;
}
Tidak ada implementation.
Abstract class
Bisa mempunyai sebagian implementation.
Contoh:
abstract class User {
name: string;
constructor(name: string) {
this.name = name;
}
greet() {
console.log("Hello");
}
abstract getRole(): string;
}
Di sini:
greet()
sudah memiliki implementation.
Tetapi:
getRole()
hanya declaration.
Jadi:
INTERFACE
│
├── declaration
├── declaration
├── declaration
└── declaration
ABSTRACT CLASS
│
├── implementation ✓
├── implementation ✓
├── declaration
└── declaration
Transcript menyebut ini sebagai perbedaan terbesar antara interface dan abstract class.
18. Interface bukan inheritance
Ini juga penting supaya tidak tertukar.
Ketika kita punya:
class Employee extends Person
itu berarti:
Employee adalah Person.
Ini inheritance.
Sedangkan:
class Admin implements User
lebih tepat dipahami:
Admin memenuhi kontrak User.
Jadi:
extends
↓
inheritance / hubungan parent-child
implements
↓
memenuhi contract/interface
19. extends vs implements
Perhatikan:
extends
class Employee extends Person {
}
Employee mendapatkan/mewarisi behavior dan property yang diwariskan dari Person.
implements
class Admin implements User {
}
Admin tidak mendapatkan implementation dari interface.
Interface tidak memberikan implementation.
Interface hanya mengatakan:
“Kamu wajib memiliki struktur seperti ini.”
Ini perbedaan yang sangat fundamental.
20. Analogi restoran
Supaya benar-benar melekat, bayangkan interface seperti standar restoran.
Kita punya:
interface Restaurant {
name: string;
open(): void;
close(): void;
}
Ini hanya kontrak.
Kemudian:
class McDonalds implements Restaurant {
name = "McDonald's";
open() {
console.log("McDonald's opens");
}
close() {
console.log("McDonald's closes");
}
}
dan:
class PizzaShop implements Restaurant {
name = "Pizza Shop";
open() {
console.log("Pizza shop opens");
}
close() {
console.log("Pizza shop closes");
}
}
Keduanya berbeda.
Tetapi keduanya memenuhi standar:
Restaurant
│
├── name
├── open()
└── close()
Maka kita bisa membuat:
function checkRestaurant(restaurant: Restaurant) {
restaurant.open();
}
Dan:
checkRestaurant(new McDonalds());
checkRestaurant(new PizzaShop());
Function tersebut tidak perlu mengetahui detail class-nya.
Ia hanya peduli:
“Apakah kamu memenuhi kontrak
Restaurant?”
21. Kenapa interface berguna?
Transcript memberikan beberapa keuntungan utama.
A. Type checking
TypeScript dapat menemukan kesalahan lebih awal saat development.
Misalnya:
interface User {
name: string;
age: number;
}
Kemudian:
const user: User = {
name: "John",
age: "twenty"
};
Error.
Karena:
age
seharusnya:
number
bukan:
string
Interface membantu compiler memastikan struktur dan type sesuai kontrak.
22. Interface juga seperti dokumentasi
Bayangkan kamu membuka project besar dan menemukan:
interface User {
firstName: string;
lastName: string;
greetUser(): void;
getFullName(): string;
}
Tanpa membaca seluruh kode, kamu sudah tahu:
“Oh, object/class yang mengikuti
Userharus punya empat hal ini.”
Jadi interface membantu developer memahami kode.
Transcript juga menjelaskan interface berfungsi sebagai dokumentasi yang membuat code lebih mudah dipahami dan dipelihara.
23. Interface membuat code lebih fleksibel
Ini salah satu manfaat terbesar.
Daripada function bergantung pada class tertentu:
function displayGreeting(admin: Admin) {
admin.greetUser();
}
kita bisa membuat:
function displayGreeting(user: User) {
user.greetUser();
}
Sekarang function tersebut bisa menerima:
Admin
Member
Customer
Employee
dll.
selama mereka:
implements User
Ini membuat code lebih reusable.
Transcript juga menekankan flexibility dan reusability sebagai manfaat interface.
24. Mental model yang paling penting
Kalau kamu baru belajar interface, jangan menghafal definisinya saja.
Ingat kalimat ini:
Interface = aturan tentang apa yang harus dimiliki, bukan bagaimana cara membuatnya.
Misalnya:
interface User {
name: string;
login(): void;
}
Artinya:
“Kalau kamu mau dianggap sebagai
User, kamu harus punyanamedanlogin().”
Kemudian:
class Admin implements User {
name = "John";
login() {
console.log("Admin login");
}
}
Admin memenuhi kontrak.
25. Gambaran keseluruhan materi
Kalau kita satukan seluruh konsep:
INTERFACE
│
│
menentukan kontrak
│
┌──────────┴──────────┐
│ │
properties methods
│ │
firstName greetUser()
lastName getFullName()
│ │
└──────────┬──────────┘
│
↓
class implements
│
┌─────────┴─────────┐
↓ ↓
Admin Member
│ │
implement semua implement semua
requirement requirement
│ │
└─────────┬─────────┘
↓
function(user: User)
│
bisa menerima keduanya
26. Contoh final yang menggabungkan semuanya
interface User {
firstName: string;
lastName: string;
greetUser(): void;
getFullName(): string;
}
class Admin implements User {
constructor(
public firstName: string,
public lastName: string
) {}
greetUser() {
console.log(`Hello admin ${this.getFullName()}`);
}
getFullName() {
return `${this.firstName} ${this.lastName}`;
}
}
class Member implements User {
constructor(
public firstName: string,
public lastName: string
) {}
greetUser() {
console.log(`Hello member ${this.getFullName()}`);
}
getFullName() {
return `${this.firstName} ${this.lastName}`;
}
}
function displayGreetMessage(user: User) {
user.greetUser();
}
const admin = new Admin("John", "Smith");
const member = new Member("Mary", "Jane");
displayGreetMessage(admin);
displayGreetMessage(member);
Output:
Hello admin John Smith
Hello member Mary Jane
Perhatikan hubungan antar bagiannya:
interface User
↓
mendefinisikan kontrak
↓
Admin implements User
Member implements User
↓
keduanya memenuhi kontrak
↓
displayGreetMessage(user: User)
↓
bisa menerima Admin maupun Member
27. Ringkasan super penting
Ada beberapa hal yang sebaiknya kamu benar-benar kuasai dari materi ini:
| Konsep | Artinya |
|---|---|
interface | Membuat kontrak/struktur |
| property di interface | Hanya declaration |
| method di interface | Hanya declaration |
| implementation | Dilakukan oleh class/object yang menggunakannya |
implements | Class mengikuti interface |
new Interface() | ❌ Tidak boleh |
user: User | Variable/parameter mengikuti bentuk User |
| Multiple interfaces | Satu class bisa implements A, B |
| Interface vs abstract class | Interface hanya declaration; abstract class bisa punya implementation |
Interface vs extends | Interface biasanya menjadi kontrak, bukan pewarisan implementation |
| Keuntungan | Type safety, readability, flexibility, reusability |
Dan satu kalimat untuk diingat:
Class menjelaskan “bagaimana object bekerja”, sedangkan interface menjelaskan “apa saja yang harus dimiliki object tersebut”.
Itulah inti terbesar dari lecture ini.