TypeScript Nesne Tipleri: Opsiyonel ve Readonly Özellikler

Bir TypeScript nesne tipi, bir nesnenin sahip olduğu özellikleri ve her birinin tipini listeler: { name: string; age: number }. Bir özelliği opsiyonel yapmak için ?, yeniden atanmasını engellemek için readonly ekleyin. Tipi satır içi yazın ya da yeniden kullanmak için type veya interface ile ad verin.

// 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

Nesne Tiplerini Yazmak

Özellikler ; veya , ile ayrılır (ikisi de çalışır, alışılmış stil ;) ve tek başına bir satır sonu da yeterlidir. Tek seferlik bir parametre için satır içi tip yeterlidir; iki kez kullanılan her şeye bir ad verin.

// 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 ve interface nesne biçimlerini eşit derecede iyi tanımlar. Farklar (declaration merging, union'lar) interface vs type sayfasında anlatılıyor.

Tipin bildirmediği bir özelliğe erişmek derleme hatasıdır: point.z TS2339 verir, Property 'z' does not exist on type '{ x: number; y: number; }'.

Opsiyonel Özellikler

Addan sonraki bir ?, özelliğin atlanabilmesini sağlar. Opsiyonel bir özelliği okumak T | undefined verir; bu yüzden TypeScript onu kullanmadan önce eksik durumu ele almanızı ister.

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

Opsiyonel bir özellik üzerinde kontrol etmeden bir metot çağırmak hatadır: p.nickname.toUpperCase() TS18048 ile başarısız olur, 'p.nickname' is possibly 'undefined'. Sonuç olarak undefined kabul edilebiliyorsa optional chaining (p.nickname?.toUpperCase()) kullanın.

prop?: T ve prop: T | undefined aynı şey değildir. İlki anahtarın olmamasına izin verir; ikincisi anahtarı zorunlu kılar, değeri undefined olabilse de:

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 } {}

Readonly Özellikler

readonly, nesne oluşturulduktan sonra bir özelliğin yeniden atanmasını engeller. Yalnızca derleme zamanında yapılan bir kontroldür ve sığdır (shallow): readonly bir özellikte saklanan bir nesne veya dizi içeriden yine değiştirilebilir.

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' }

Çıktı iki sınırı da gösteriyor: id çalışma zamanında gerçekten değişti (readonly olduğunu yalnızca derleyici biliyordu) ve içerideki dizi değiştirildi. Readonly bir dizi için readonly string[] kullanın; her özelliği birden readonly yapmak için Readonly<Order> kullanın.

Fazla Özellik Kontrolü

Bir nesne literal'ini doğrudan tipli bir değişkene atadığınızda ya da doğrudan tipli bir parametreye verdiğinizde TypeScript, tipin bildirmediği her özelliği reddeder. Yeni bir literal'deki fazla özellikler neredeyse her zaman yazım hatasıdır.

// 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'?

Kod TS2561'dir, çünkü derleyici yakın bir eşleşme buldu; benzer adı olmayan fazla bir özellik TS2353 verir, Object literal may only specify known properties, and 'z' does not exist in type 'Point'. Bu kontrol olmasaydı yazım hatası derlenir, color değeri undefined olur ve program sessizce siyah çizerdi. Kontrol yalnızca yeni literal'lere uygulanır. Zaten bir değişkende duran bir nesne fazla özellikler taşıyabilir, çünkü TypeScript'in tip sistemi yapısaldır: bir değer, en azından gerekli özelliklere sahipse bir tipe uyar.

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

İç İçe Nesneler ve Metotlar

Nesne tipleri iç içe geçebilir ve metotları hem metot sözdizimiyle hem de fonksiyon tipli bir özellikle tanımlayabilir.

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);

Derin ya da yeniden kullanılan biçimler için iç tipe bir ad verin (type Address = { ... }) ve ona başvurun ya da son satırlardaki gibi dış tipten bir indexed access ile çekip alın: Company["address"].

object, {} ve Object

Birbirine benzeyen üç tip farklı anlamlar taşır:

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);

{} "boş bir nesne" anlamına gelmez; "null veya undefined değil" anlamına gelir. Anahtarları bilinmeyen herhangi bir nesneyi kabul etmek için Record<string, unknown> kullanın; anahtarlardan değerlere bir eşleme için dictionary sayfasında gösterildiği gibi bir index signature ya da Record kullanın. Çoğu zaman belirli bir biçim, bu üçünden daha iyidir.