Interface pada Typescript

Sekarang aku akan membahas tentang interface pada typescript. Interface dapat digunakan sebagai pengganti untuk tipe alias. Pendeklarasiannya sebenarnya sangat mirip dengan alias type tapi interface dapat dikembangkan sedangkan alias tidak dapat dikembangkan. Interface sangat cocok jika kita memiliki tipe data yang cukup kompleks. Berikut ini adalah contoh penggunaan interface.

describe('Inteface', function () {
    it('should support interface', () => {
        interface User {
            id: number,
            name: string,
            address?: string
        }

        const user: User = {
            id: 1,
            name: "Ardhan"
        }

        console.info(user);
    });
});

Pada interface, kita bisa set attribute-nya menjadi readonly sehingga attribute tersebut hanya bisa dibaca tapi tidak bisa diubah. Berikut ini adalah contoh penggunaan attribute read only pada interface.

describe('Inteface', function () {
    it('should support interface', () => {
        interface User {
            id: number,
            name: string,
            address?: string,
            readonly nik: string
        }

        const user: User = {
            id: 1,
            name: "Ardhan",
            nik: "123345"
        }

        user.nik = "123";
    });
});

Pada contoh di atas, jika kita berusaha mengubah nik pada user pada akan terjadi error sebagai berikut.

Function Interface

Di typescript kita bisa membuat function dalam bentuk interface. Mirip dengan bahasa pemrograman lain, ketika kita membuat sebuah interface kita bisa membuat implementasinya. Di bawah ini sebuah contoh interface untuk perkalian, dimana pada interface function kita hanya mendeklarasikan parameter, yaitu value1: number dan value2:number. Untuk resultnya kita juga harus menentukan tipe datanya.

describe('Inteface', function () {
    it('should support interface function', () => {
        interface MultiplyFunction {
            (value1: number, value2: number): number
        }

        const multiply: MultiplyFunction = (value1: number, value2: number): number => {
            return value1 * value2;
        }

        const secondMultiply: MultiplyFunction = (value1: number, value2: number): number => {
            return (2 * value1) * (2 * value2);
        }

        const result = multiply(5,2);
        console.info(result);

        const secondResult = secondMultiply(2, 5);
        console.info(secondResult);
    });
});

Indexable Interface

Interface dapat digunakan untuk membuat tipe data yang memiliki index. Misalnya saja array atau object. Berikut ini adalah contohnya

describe('Inteface', function () {
    it('should support index type', () => {
        interface ArrayNumberInterface {
            [index: number]: string
        }

        interface ArrayKeyInterface {
            [index: string]: string
        }

        const names: ArrayNumberInterface = ["Ardhan", "Wahyu", "Rahmanu"];
        console.info(names[0]);

        const people: ArrayKeyInterface = {
            firstName: "Ardhan",
            lastName: "Rahmanu"
        }
        console.info(people["firstName"]);
        console.info(people["lastName"]);

    });
});

Pada contoh di atas kita punya 2 interface, yaitu ArrayNumberInterface dan ArrayKeyInterface. Pada ArrayNumberInterface kita menggunakan indexnya menggunakan type number sedangkan untuk ArrayKeyInteface kita menggunakan string sebagai index.

Perlu diperhatikan, ketika kita membuat interface pada typescript yang menggunakan index dan index yang digunakan adalah string kita tidak bisa menulis secara langsung seperti ini const names: ArrayNumberInterface = [“Ardhan”, “Wahyu”, “Rahmanu”];. Kita harus terlebih dahulu menyebutkan indexnya dengan string.

Extending Interface pada Typescript

Kelebihan dari interface pada typescript adalah kita bisa melakukan extends interface ke interface lain. Setiap attribute akan diwariskan dari interface yang di extends ke interface yang meng-extends. Berikut ini adalah contoh penggunaan extends interface.

describe('Inteface', function () {
    it('should support extending interface', () => {
        interface User {
            id: number,
            name: string
        }

        interface Staff extends User {
            nip: string
        }

        interface College extends User {
            nim: string;
        }

        const staff: Staff = {
            id: 1,
            name: "Ardhan",
            nip: "123"
        }

        console.info(staff);

        const college: College = {
            id: 2,
            name: "Rahmanu",
            nim: "1112"
        }

        console.info(college);
    });
});

Pada contoh di atas, interface Staff dan College meneruskan interface User. Deklarasi variable staff akan error jika kita tidak mengisi id atau name.

Function pada Interface

Ketika kita mengkompilasi typescript menjadi javascript maka interface ini sebenarnya akan diubah menjadi sebuah object. Di javascript kita bisa menambahkan attribute object berupa function begitu juga di interface pada typescript kita juga bisa menambahkan function sebagai attribute interface. Berikut ini adalah contohnya

describe('Inteface', function () {
    it('should support function as attribute', () => {
        interface Person {
            name: string;
            greetingFunction(name: string): string;
        }

        const person: Person = {
            name: "Ardhan",
            greetingFunction(name: string): string {
                return `Selamat datang ${name}`;
            }
        }

        console.info(person.name);
        console.info(person.greetingFunction("Ardhan"));
    });
});

Penggabungan Interface pada Typescript

Interface pada typescript dapat digabung untuk menjadi type data baru. Tipe data hasil penggabungan akan mendapatkan attribute dari interface yang digabung. Untuk melakukan penggabungan kita bisa menggunakan tanda (&). Berikut ini adalah contoh penggabungan interface.

describe('Inteface', function () {
    it('should support intersection', () => {
        interface HasUser {
            id: number;
            name: string;
        }

        interface HasDepartment {
            department: string;
        }

        type Staff = HasUser & HasDepartment;

        const staff: Staff = {
            id: 1,
            name: "Ardhan",
            department: "Information & Technology"
        }
    }); 
});

Penutup

Nah, demikianlah sedikit penjelasan tentang interface pada typescript. Semoga tulisan yang hanya sedikit ini dapat berguna untuk kita semua.