Interface #

Di TypeScript, interface adalah kontrak untuk objek, yang mendefinisikan struktur objek, termasuk tipe dan properti yang harus dimiliki oleh objek tersebut. Interface membantu dalam memastikan bahwa objek memiliki bentuk tertentu, yang memberikan tipe yang lebih aman dan kontrol yang lebih baik dalam penulisan kode.

Mendefinisikan Interface #

Interface didefinisikan menggunakan kata kunci interface, diikuti oleh nama interface dan blok properti yang didefinisikan dengan tipe masing-masing.

Contoh:

interface Person {
    name: string;
    age: number;
}

let john: Person = {
    name: "John Doe",
    age: 30
};

• Person: Nama interface yang mendefinisikan struktur objek yang memiliki properti name dan age.
• Objek john harus mematuhi struktur yang didefinisikan oleh interface Person.

Properti Opsional #

Interface memungkinkan Anda mendefinisikan properti opsional menggunakan tanda ?. Properti ini tidak harus ada di objek yang diimplementasikan.

Contoh:

interface Person {
    name: string;
    age?: number; // Properti opsional
}

let jane: Person = {
    name: "Jane Doe"
    // `age` bisa dihilangkan karena bersifat opsional
};

• age?: Menandakan bahwa properti age adalah opsional, sehingga objek jane tetap valid meskipun tidak memiliki properti age.

Readonly Properties #

Interface dapat mendefinisikan properti yang hanya dapat dibaca (readonly). Properti ini tidak dapat diubah setelah nilainya diatur.

Contoh:

interface Person {
    readonly id: number;
    name: string;
    age?: number;
}

let person: Person = {
    id: 1,
    name: "Alice"
};

// person.id = 2; // Error: Cannot assign to 'id' because it is a read-only property.

• readonly id: Properti id bersifat read-only, yang berarti tidak bisa diubah setelah ditetapkan.

Interface untuk Fungsi #

Interface juga dapat digunakan untuk mendefinisikan tipe untuk fungsi, termasuk parameter yang diperlukan dan tipe pengembalian.

Contoh:

interface Greet {
    (name: string): string;
}

let sayHello: Greet = function (name: string): string {
    return `Hello, ${name}`;
};

console.log(sayHello("John")); // Output: Hello, John

• Greet: Interface yang mendefinisikan fungsi dengan satu parameter name bertipe string dan mengembalikan nilai bertipe string.

Indexable Types #

Interface dapat mendefinisikan tipe untuk objek yang dapat diindeks, yaitu objek yang menggunakan properti dinamis atau array-like.

Contoh:

interface StringArray {
    [index: number]: string;
}

let myArray: StringArray = ["Alice", "Bob", "Charlie"];

console.log(myArray[0]); // Output: Alice

• [index: number]: string: Mendefinisikan bahwa indeks (yang harus berupa angka) mengembalikan nilai bertipe string.

Extending Interface #

Interface dapat mewarisi properti dari interface lain menggunakan kata kunci extends. Ini memungkinkan Anda untuk membuat interface baru yang menggabungkan properti dari beberapa interface.

Contoh:

interface Person {
    name: string;
}

interface Employee extends Person {
    employeeId: number;
}

let employee: Employee = {
    name: "John Doe",
    employeeId: 1234
};

• Employee extends Person: Interface Employee mewarisi semua properti dari Person dan menambahkan properti baru, employeeId.

Implementasi Interface pada Class #

Kelas (class) dapat mengimplementasikan interface, memastikan bahwa kelas tersebut memenuhi kontrak yang didefinisikan oleh interface.

Contoh:

interface Person {
    name: string;
    age: number;
    greet(): string;
}

class Student implements Person {
    name: string;
    age: number;

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

    greet(): string {
        return `Hello, my name is ${this.name}`;
    }
}

let student = new Student("Alice", 20);
console.log(student.greet()); // Output: Hello, my name is Alice

• implements Person: Kelas Student harus mengimplementasikan semua properti dan metode yang didefinisikan dalam interface Person.

Hybrid Types #

Interface di TypeScript dapat menggabungkan tipe objek dan fungsi, memungkinkan Anda untuk mendefinisikan tipe hibrida yang dapat bertindak sebagai keduanya.

Contoh:

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    let counter = <Counter>function (start: number): string {
        return `Start from ${start}`;
    };
    counter.interval = 123;
    counter.reset = function () {
        console.log("Counter reset");
    };
    return counter;
}

let c = getCounter();
console.log(c(10)); // Output: Start from 10
console.log(c.interval); // Output: 123
c.reset(); // Output: Counter reset

• Counter: Interface yang menggabungkan fungsi dengan properti dan metode lainnya.

Interface Merging #

Jika dua interface dengan nama yang sama dideklarasikan di ruang lingkup yang sama, TypeScript akan menggabungkannya menjadi satu interface.

Contoh:

interface Box {
    height: number;
    width: number;
}

interface Box {
    scale: number;
}

let box: Box = { height: 10, width: 20, scale: 2 };

• Merging: Kedua interface Box digabungkan, sehingga interface akhir memiliki properti height, width, dan scale.

Kesimpulan #

Dengan memanfaatkan interface di TypeScript, Anda dapat menulis kode yang lebih terstruktur, teruji tipe, dan mudah dipelihara. Interface memberikan fleksibilitas dan kekuatan untuk mendefinisikan kontrak tipe yang dapat digunakan di seluruh aplikasi, baik dalam objek, fungsi, maupun kelas.