¶Pendahuluan

Pada artikel kali ini, kita akan membahas interface dalam TypeScript, yang merupakan salah satu fitur paling penting dan sering digunakan dalam pengembangan aplikasi TypeScript.

Interface digunakan untuk mendefinisikan struktur objek, memastikan bahwa objek memiliki properti dan tipe data yang sesuai. Dengan interface, kita bisa menulis kode yang lebih terstruktur, mudah dipahami, dan aman dari error.

Apa Itu Interface?

Interface adalah sebuah kontrak atau blueprint yang menentukan struktur suatu objek. Dengan menggunakan interface, kita bisa memastikan bahwa objek yang dibuat memiliki properti yang benar dengan tipe data yang sesuai.

¶Interface dengan Properti Opsional

Kita bisa membuat properti dalam interface yang opsional (boleh ada atau tidak) dengan menambahkan tanda tanya (?).

interface Product {
    id: number;
    name: string;
    price: number;
    description?: string; // Properti opsional
}

const product1: Product = {
    id: 1,
    name: "Laptop",
    price: 10000000
};

const product2: Product = {
    id: 2,
    name: "Mouse",
    price: 200000,
    description: "Mouse gaming RGB"
};

console.log(product1);
console.log(product2);

Pada kode diatas, Kita bisa membuat objek Product dengan atau tanpa properti description. Interface dengan properti opsional berguna untuk skenario di mana beberapa properti tidak selalu diperlukan.

¶Interface dengan Readonly Property

Jika kita ingin sebuah properti dalam interface tidak bisa diubah setelah objek dibuat, kita bisa menggunakan readonly.

interface Car {
    readonly id: number;
    brand: string;
    model: string;
}

const myCar: Car = {
    id: 1,
    brand: "Toyota",
    model: "Corolla"
};

myCar.brand = "Honda"; // ✅ Boleh diubah
// myCar.id = 2; // ❌ Error! Properti id bersifat readonly

console.log(myCar);

Pada kode diatas, readonly mencegah perubahan pada properti tertentu setelah objek dibuat, biasanya berguna untuk ID unik, timestamp, atau nilai yang tidak boleh diubah.

¶Interface untuk Function

Interface tidak hanya bisa digunakan untuk objek, tetapi juga untuk mendefinisikan struktur function.

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

const sayHello: Greet = (name) => {
    return `Hello, ${name}!`;
};

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

Pada kode diatas, kita membuat sebuah interface untuk memastikan function memiliki parameter dan return value yang benar.

¶Interface untuk Array

Kita juga bisa menggunakan interface untuk mendefinisikan struktur array.

interface NumberArray {
    [index: number]: number;
}

const angka: NumberArray = [10, 20, 30, 40];

console.log(angka[1]); // Output: 20

Pada kode diatas, kita memastikan bahwa array hanya berisi tipe data tertentu (dalam contoh ini, hanya angka).

¶Interface dengan Extends

Kita bisa membuat interface baru berdasarkan interface lain dengan menggunakan extends.

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

interface Employee extends Person {
    jobTitle: string;
    salary: number;
}

const emp: Employee = {
    name: "Rina",
    age: 30,
    jobTitle: "Software Engineer",
    salary: 15000000
};

console.log(emp);

Pada kode daitas, kita membuat sebuah interface person dan employee, kemudian kita wariskan properti yang ada didalam object person kedalam employee.

¶Interface dengan Intersection

Selain extends, kita juga bisa menggabungkan dua atau lebih interface menggunakan operator &.

interface HasName {
    name: string;
}

interface HasAge {
    age: number;
}

type Person = HasName & HasAge;

const person: Person = {
    name: "Dewi",
    age: 25
};

console.log(person);

Pada kode diatas, kita menggabungkan beberapa interface menjadi satu tipe baru, dengan operator &.

¶Interface vs Type Alias

Dalam TypeScript, selain interface, kita juga bisa menggunakan type untuk mendefinisikan tipe data.

Kapan menggunakan interface?

• Jika kita ingin mendefinisikan struktur objek yang bisa diwarisi.
• Jika kita ingin kode lebih terstruktur dan scalable.

Kapan menggunakan type alias?

• Jika kita ingin membuat union type (string | number).
• Jika kita ingin mendefinisikan tuple atau primitive types.

¶Penutup

Pada artikel berikutnya, kita akan belajar bersama - sama tentang Class dalam Typescript. Semoga bermanfaat, terima kasih :)