TypeScript Objekttypen: optionale und readonly Eigenschaften

Ein TypeScript-Objekttyp listet die Eigenschaften eines Objekts und den Typ jeder Eigenschaft auf: { name: string; age: number }. Mit ? machst du eine Eigenschaft optional, mit readonly verhinderst du, dass sie neu zugewiesen wird. Schreibe den Typ inline oder benenne ihn mit type oder interface, um ihn wiederzuverwenden.

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

Objekttypen schreiben

Eigenschaften werden durch ; oder , getrennt (beides funktioniert, ; ist der übliche Stil), und ein Zeilenumbruch allein reicht auch. Ein Inline-Typ ist für einen einmaligen Parameter in Ordnung; alles, was zweimal verwendet wird, bekommt einen Namen.

// 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 und interface beschreiben Objektformen gleich gut. Die Unterschiede (Declaration Merging, Unions) stehen auf der Seite interface vs type.

Auf eine Eigenschaft zuzugreifen, die der Typ nicht deklariert, ist ein Compilerfehler: point.z ergibt TS2339, Property 'z' does not exist on type '{ x: number; y: number; }'.

Optionale Eigenschaften

Ein ? hinter dem Namen erlaubt, die Eigenschaft wegzulassen. Eine optionale Eigenschaft zu lesen ergibt T | undefined, daher zwingt dich TypeScript, den fehlenden Fall zu behandeln, bevor du sie verwendest.

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

Eine Methode auf einer optionalen Eigenschaft ohne Prüfung aufzurufen ist ein Fehler: p.nickname.toUpperCase() scheitert mit TS18048, 'p.nickname' is possibly 'undefined'. Nutze Optional Chaining (p.nickname?.toUpperCase()), wenn undefined ein akzeptables Ergebnis ist.

prop?: T und prop: T | undefined sind nicht dasselbe. Das erste erlaubt, dass der Schlüssel fehlt; das zweite verlangt den Schlüssel, auch wenn sein Wert undefined sein darf:

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 Eigenschaften

readonly verhindert, dass eine Eigenschaft nach dem Erzeugen des Objekts neu zugewiesen wird. Es ist nur eine Prüfung beim Kompilieren, und sie ist flach: Ein Objekt oder Array in einer readonly Eigenschaft kann innen trotzdem verändert werden.

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

Die Ausgabe zeigt beide Grenzen: Die id hat sich zur Laufzeit wirklich geändert (nur der Compiler wusste, dass sie readonly ist), und das Array darin wurde verändert. Für ein readonly Array nimmst du readonly string[]; um alle Eigenschaften auf einmal readonly zu machen, Readonly<Order>.

Excess Property Checks

Weist du ein Objektliteral direkt einer typisierten Variablen zu oder übergibst es direkt an einen typisierten Parameter, lehnt TypeScript jede Eigenschaft ab, die der Typ nicht deklariert. Zusätzliche Eigenschaften in einem frischen Literal sind fast immer Tippfehler.

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

Der Code ist TS2561, weil der Compiler einen ähnlichen Namen gefunden hat; eine zusätzliche Eigenschaft ohne ähnlichen Namen ergibt TS2353, Object literal may only specify known properties, and 'z' does not exist in type 'Point'. Ohne die Prüfung würde der Tippfehler kompilieren, color wäre undefined, und das Programm würde stillschweigend in Schwarz zeichnen. Die Prüfung gilt nur für frische Literale. Ein Objekt, das schon in einer Variablen liegt, darf zusätzliche Eigenschaften haben, denn TypeScript typisiert strukturell: Ein Wert passt zu einem Typ, wenn er mindestens die geforderten Eigenschaften hat.

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

Verschachtelte Objekte und Methoden

Objekttypen lassen sich verschachteln, und sie können Methoden beschreiben, entweder in Methodensyntax oder als Eigenschaft mit Funktionstyp.

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

Bei tiefen oder wiederverwendeten Formen benennst du den inneren Typ (type Address = { ... }) und verweist darauf, oder du holst ihn per Indexed Access aus dem äußeren Typ, Company["address"], wie es die letzten Zeilen tun.

object vs {} vs Object

Drei Typen klingen ähnlich und bedeuten Verschiedenes:

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

{} bedeutet nicht „ein leeres Objekt“, sondern „nicht null oder undefined“. Um ein beliebiges Objekt mit unbekannten Schlüsseln zu akzeptieren, nimm Record<string, unknown>; für eine Zuordnung von Schlüsseln zu Werten eine Index-Signatur oder Record, wie auf der Seite zum Dictionary gezeigt. Meistens ist eine konkrete Form besser als jeder der drei.