Object Type di TypeScript: Property Opsional dan Readonly

Object type di TypeScript mendaftar property yang dimiliki sebuah object beserta tipe masing-masing: { name: string; age: number }. Tambahkan ? untuk membuat property opsional dan readonly supaya property tidak bisa di-assign ulang. Tulis tipenya inline, atau beri nama dengan type atau interface supaya bisa dipakai ulang.

// Inline object type
let point: { x: number; y: number } = { x: 3, y: 4 };

// Named object type with optional and readonly properties
type User = {
    readonly id: number;
    name: string;
    email?: string; // optional: may be missing
};

const ada: User = { id: 1, name: "Ada" };
const grace: User = { id: 2, name: "Grace", email: "grace@example.com" };

console.log(point.x + point.y);           // 7
console.log(ada.email ?? "no email");      // no email
console.log(grace.email?.toUpperCase());   // GRACE@EXAMPLE.COM

Menulis Object Type

Property dipisahkan dengan ; atau , (keduanya bisa, ; adalah gaya yang umum), dan baris baru saja sudah cukup. Tipe inline cocok untuk parameter yang hanya dipakai sekali; untuk apa pun yang dipakai dua kali, beri nama.

// Inline, in a parameter
function area(rect: { width: number; height: number }): number {
    return rect.width * rect.height;
}

// Named with a type alias
type Rect = { width: number; height: number };

// Named with an interface (the same shape)
interface RectShape {
    width: number;
    height: number;
}

type dan interface sama baiknya untuk menggambarkan bentuk object. Perbedaannya (declaration merging, union) dibahas di halaman interface vs type.

Mengakses property yang tidak dideklarasikan tipenya adalah error kompilasi: point.z menghasilkan TS2339, Property 'z' does not exist on type '{ x: number; y: number; }'.

Property Opsional

Tanda ? setelah nama membuat property itu boleh tidak disertakan. Membaca property opsional menghasilkan T | undefined, jadi TypeScript memaksamu menangani kasus kosong sebelum memakainya.

type Profile = {
    name: string;
    nickname?: string;
    age?: number;
};

function greet(p: Profile): string {
    // p.nickname is string | undefined
    const shown = p.nickname ?? p.name;         // default with ??
    const ageText = p.age !== undefined ? ` (${p.age})` : ""; // or check
    return `Hi, ${shown}${ageText}`;
}

console.log(greet({ name: "Ada" }));                        // Hi, Ada
console.log(greet({ name: "Grace", nickname: "Amazing Grace", age: 85 }));
console.log("age" in { name: "Ada" });                      // false

Memanggil method pada property opsional tanpa pengecekan adalah error: p.nickname.toUpperCase() gagal dengan TS18048, 'p.nickname' is possibly 'undefined'. Pakai optional chaining (p.nickname?.toUpperCase()) kalau undefined adalah hasil yang bisa diterima.

prop?: T dan prop: T | undefined tidak sama. Yang pertama mengizinkan key-nya tidak ada; yang kedua mewajibkan key-nya ada, walaupun nilainya boleh undefined:

type A = { note?: string };
type B = { note: string | undefined };

const a1: A = {};                    // fine: key left out
const b1: B = { note: undefined };   // fine: key present
// @ts-expect-error: Property 'note' is missing in type '{}' but required in type 'B'.
const b2: B = {};

console.log(a1, b1, b2); // {} { note: undefined } {}

Property Readonly

readonly mencegah property di-assign ulang setelah object dibuat. Ini hanya pengecekan saat kompilasi, dan sifatnya dangkal: object atau array yang tersimpan di property readonly tetap bisa diubah isinya.

type Order = {
    readonly id: string;
    readonly items: string[];
    status: "open" | "paid";
};

const order: Order = { id: "A-17", items: ["tea"], status: "open" };

order.status = "paid"; // fine
// @ts-expect-error: Cannot assign to 'id' because it is a read-only property.
order.id = "B-2";
order.items.push("cake"); // allowed: readonly is shallow

console.log(order); // { id: 'B-2', items: [ 'tea', 'cake' ], status: 'paid' }

Output-nya menunjukkan kedua batasan itu: id benar-benar berubah saat runtime (hanya compiler yang tahu property itu readonly), dan array di dalamnya ikut diubah. Untuk array readonly, pakai readonly string[]; untuk membuat semua property readonly sekaligus, pakai Readonly<Order>.

Excess Property Check

Saat kamu meng-assign object literal langsung ke variabel bertipe atau langsung mengirimnya ke parameter bertipe, TypeScript menolak setiap property yang tidak dideklarasikan tipenya. Property tambahan di literal yang baru dibuat hampir selalu berarti salah ketik.

// This does not compile: 'colour' is not a property of Options.
type Options = { color?: string; size?: number };

function draw(opts: Options) {
    console.log(opts.color ?? "black", opts.size ?? 1);
}

draw({ colour: "red", size: 2 });

index.ts(8,8): error TS2561: Object literal may only specify known properties, but 'colour' does not exist in type 'Options'. Did you mean to write 'color'?

Kodenya TS2561 karena compiler menemukan nama yang mirip; property tambahan tanpa nama yang mirip menghasilkan TS2353, Object literal may only specify known properties, and 'z' does not exist in type 'Point'. Tanpa pengecekan ini, salah ketik itu akan lolos kompilasi, color akan bernilai undefined, dan program diam-diam menggambar dengan warna hitam. Pengecekan ini hanya berlaku untuk literal yang baru dibuat. Object yang sudah tersimpan di variabel boleh membawa property tambahan, karena sistem tipe TypeScript bersifat struktural: sebuah nilai cocok dengan suatu tipe kalau ia punya setidaknya property yang diwajibkan.

type Point = { x: number; y: number };

const point3d = { x: 1, y: 2, z: 3 };
const p: Point = point3d; // fine: point3d has x and y

function show(pt: Point) {
    console.log(pt.x, pt.y);
}
show(point3d); // 1 2

Object Bersarang dan Method

Object type bisa bersarang, dan bisa menggambarkan method dengan sintaks method atau dengan property bertipe fungsi.

type Company = {
    name: string;
    address: {
        city: string;
        zip?: string;
    };
    tags: string[];
    describe(): string;                  // method syntax
    rename: (newName: string) => void;   // function property
};

const acme: Company = {
    name: "Acme",
    address: { city: "Berlin" },
    tags: ["b2b"],
    describe() {
        return `${this.name} in ${this.address.city}`;
    },
    rename(newName) {
        this.name = newName;
    },
};

acme.rename("Acme GmbH");
console.log(acme.describe());               // Acme GmbH in Berlin
console.log(acme.address.zip ?? "no zip");  // no zip

type Address = Company["address"]; // reuse a nested type by indexing
const home: Address = { city: "Paris", zip: "75001" };
console.log(home);

Untuk bentuk yang dalam atau dipakai ulang, beri nama tipe bagian dalamnya (type Address = { ... }) lalu rujuk tipe itu, atau ambil dari tipe luarnya dengan indexed access, Company["address"], seperti di baris terakhir.

object vs {} vs Object

Tiga tipe ini terdengar mirip, tetapi artinya berbeda:

const a: object = { id: 1 };
const b: object = [1, 2];
const c: {} = 42;          // allowed: {} does not mean "empty object"
const d: {} = "text";      // allowed too

// @ts-expect-error: Type 'number' is not assignable to type 'object'.
const e: object = 42;

console.log(a, b, c, d, e);

{} tidak berarti "object kosong"; artinya "bukan null atau undefined". Untuk menerima object apa pun dengan key yang tidak diketahui, pakai Record<string, unknown>; untuk pemetaan key ke nilai, pakai index signature atau Record seperti yang ditunjukkan di halaman dictionary. Hampir selalu, bentuk yang spesifik lebih baik daripada ketiganya.