Objek, Interface, & Type Aliases TS | Dasar TypeScript untuk JavaScript Developer | Mahir.dev | Mahir.dev Academy

Objek, Interface, & Type Aliases TS | Dasar TypeScript untuk JavaScript Developer | Mahir.dev | Mahir.dev Academy

typescript

let pengguna: { 
    nama: string; 
    umur: number; 
    aktif: boolean; 
};
 
pengguna = {
    nama: "Budi Santoso",
    umur: 30,
    aktif: true
};
 
// pengguna = { nama: "Siti", umur: "dua puluh" }; // ERROR! Umur harus number
// pengguna = { nama: "Ani" }; // ERROR! Properti 'umur' dan 'aktif' hilang
 
function cetakInfoProduk(produk: { id: number; nama: string; harga?: number }) { // harga opsional
    console.log(`Produk: ${produk.nama} (ID: ${produk.id})`);
    if (produk.harga) {
        console.log(`Harga: Rp ${produk.harga}`);
    }
}
 
cetakInfoProduk({ id: 101, nama: "Laptop Keren", harga: 15000000 });
cetakInfoProduk({ id: 102, nama: "Mouse Gaming" }); // Oke, harga opsional

Sintaks Dasar interface:

typescript

interface NamaInterfaceKamu {
    namaProperti1: TipeData1;
    namaProperti2: TipeData2;
    propertiOpsional?: TipeData3; // Tanda tanya (?) buat properti opsional
    readonly propertiReadOnly: TipeData4; // Cuma bisa dibaca, gak bisa diubah setelah inisialisasi objek
    metodeLagi?(param: Tipe): TipeReturn; // Metode juga bisa didefinisikan
}

typescript

interface Pengguna {
    id: number;
    nama: string;
    email: string;
    alamat?: string; // Alamat itu opsional
    readonly tanggalDaftar: Date; // Gak bisa diubah setelah diset
    sapa(): string; // Metode yang harus ada dan mengembalikan string
}
 
let pengguna1: Pengguna = {
    id: 1,
    nama: "Citra Lestari",
    email: "citra@email.com",
    tanggalDaftar: new Date(),
    sapa: function() { // atau sapa() { return `Halo, ${this.nama}`; }
        return `Halo, nama saya ${this.nama}`;
    }
};
 
// pengguna1.tanggalDaftar = new Date(); // ERROR! tanggalDaftar itu readonly
// pengguna1.id = 2; // ERROR jika id didefinisikan sbg readonly interface Pengguna { readonly id: number; ... }
 
console.log(pengguna1.sapa()); // Output: Halo, nama saya Citra Lestari
 
let pengguna2: Pengguna = {
    id: 2,
    nama: "Andi Wijaya",
    email: "andi@email.com",
    alamat: "Jl. Mawar No. 10", // Ngasih nilai ke properti opsional
    tanggalDaftar: new Date(),
    sapa: () => `Hi, I'm Andi` // Implementasi metode bisa beda
};

Reusable: Kamu bisa pake nama interface (Pengguna) di banyak tempat sebagai tipe.
Jelas dan Deskriptif: Langsung keliatan "bentuk" data yang diharapkan.

Bisa di-extend (Declaration Merging & Inheritance):

Kamu bisa nambahin properti baru ke interface yang udah ada dengan ngedeklarasiin interface dengan nama yang sama lagi (Declaration Merging).
Satu interface bisa "mewarisi" properti dari interface lain pake keyword extends.

typescript

interface Karyawan extends Pengguna { // Karyawan mewarisi semua properti Pengguna
    jabatan: string;
    gaji: number;
}
 
let karyawan1: Karyawan = {
    id: 3,
    nama: "Dewi Anggraini",
    email: "dewi@email.com",
    tanggalDaftar: new Date(),
    sapa: () => `Hello, ${karyawan1.nama}`,
    jabatan: "Software Engineer",
    gaji: 20000000
};

typescript

type TitikKoordinat = {
    x: number;
    y: number;
    label?: string;
};
 
let titikA: TitikKoordinat = { x: 10, y: 20 };
let titikB: TitikKoordinat = { x: 5, y: 15, label: "Titik B" };
 
// Type alias juga bisa buat tipe lain:
type ID = string | number; // Union type
type FungsiCallback = (data: any) => void; // Function type
 
let idPengguna: ID = "user-123";
idPengguna = 456; // Oke
 
const prosesData: FungsiCallback = (hasil) => {
    console.log("Data diproses:", hasil);
};

Declaration Merging: interface mendukung declaration merging, type aliases enggak. Artinya, kalau kamu definisiin dua interface dengan nama yang sama, TypeScript bakal ngegabungin propertinya. Ini kadang berguna buat nge-extend interface dari library pihak ketiga.

typescript

interface Mobil { merek: string; }
interface Mobil { tahun: number; } // Ini bakal digabung jadi Mobil { merek: string; tahun: number; }
 
// type DataMobil = { merek: string; };
// type DataMobil = { tahun: number; }; // ERROR! Gak bisa redeclare type alias DataMobil.

Extending/Implementing:
- interface bisa extends interface lain (atau class). Class juga bisa implements interface (buat mastiin class itu punya properti/metode tertentu).
- type aliases bisa ngelakuin hal mirip inheritance pake intersection types (&).
  typescript
```
type KendaraanDasar = { roda: number; };
type MobilTipe = KendaraanDasar & { pintu: number; merek: string; }; // Pake intersection
```
Fleksibilitas type: type aliases lebih fleksibel karena dia bisa ngasih nama ke tipe apa pun, gak cuma bentuk objek (misal, union type, tuple, tipe primitif). interface itu khusus buat ngedefinisiin bentuk objek (atau class).

Properti Opsional (?): Tambahin tanda tanya ? setelah nama properti dan sebelum titik dua tipe datanya di interface atau type objek. Ini artinya properti itu gak wajib ada pas objeknya dibikin. Kalau diakses dan gak ada, nilainya undefined.
typescript
```
interface Produk {
    nama: string;
    harga: number;
    deskripsi?: string; // deskripsi ini opsional
}
let buku: Produk = { nama: "Buku TypeScript", harga: 150000 }; // Oke, deskripsi gak ada
```
Properti Read-only (readonly): Tambahin keyword readonly sebelum nama properti. Ini artinya nilai properti itu cuma bisa diset pas objeknya pertama kali dibikin. Setelah itu, gak bisa diubah lagi nilainya.
typescript
```
interface User {
    readonly id: number;
    username: string;
}
let userBaru: User = { id: 1, username: "budi_ts" };
// userBaru.id = 2; // ERROR! Properti 'id' itu readonly.
```