Nepovinné vlastnosti

Ne každý hrdina má přezdívku. U vlastnosti, která smí chybět, napište za její název otazník, stejně jako u nepovinných parametrů:

type Hrdina = { jmeno: string; uroven: number; prezdivka?: string };

const kira: Hrdina = { jmeno: "Kira", uroven: 3, prezdivka: "Rychlý šíp" };
const bruno: Hrdina = { jmeno: "Bruno", uroven: 2 };

console.log(bruno);
console.log(bruno.prezdivka);

Vypíše:

{ jmeno: "Bruno", uroven: 2 }
undefined

Nepovinnou vlastnost smíte v objektu vynechat a TypeScript ji nebude hlásit jako chybějící. Když ji čtete, dostanete její hodnotu, nebo undefined, když v objektu není, stejně jako v JavaScriptu. Typ bruno.prezdivka je proto string | undefined, a než ji použijete jako text, chce TypeScript kontrolu:

type Hrdina = { jmeno: string; uroven: number; prezdivka?: string };

const kira: Hrdina = { jmeno: "Kira", uroven: 3, prezdivka: "Rychlý šíp" };
console.log(kira.prezdivka.toUpperCase());

main.ts(4,13): error TS18048: 'kira.prezdivka' is possibly 'undefined'.

Kira přezdívku má, a TypeScript to přesto hlásí. Nedívá se totiž na hodnotu, ale na typ: kira je Hrdina a hrdinovi přezdívka chybět smí. Zkontrolujte ji stejně jako nepovinný parametr:

type Hrdina = { jmeno: string; uroven: number; prezdivka?: string };

function titulHrdiny(hrdina: Hrdina): string {
    if (hrdina.prezdivka === undefined) {
        return hrdina.jmeno;
    }
    return `${hrdina.jmeno} „${hrdina.prezdivka.toUpperCase()}“`;
}

console.log(titulHrdiny({ jmeno: "Kira", uroven: 3, prezdivka: "Rychlý šíp" }));
console.log(titulHrdiny({ jmeno: "Bruno", uroven: 2 }));

Vypíše:

Kira „RYCHLÝ ŠÍP“
Bruno

Nepovinnou vlastnost můžete nastavit i později: bruno.prezdivka = "Medvěd"; je v pořádku, protože typ říká, že hrdina přezdívku mít smí. Vlastnost, která v typu není, přidat nejde, jak už víte.

Kdy má být vlastnost nepovinná? Když je normální, že chybí: přezdívka, slabina, zbraň, kterou hrdina zatím nemá. Když ji musí mít každý objekt, nechte ji povinnou. TypeScript pak hlídá, že jste na ni nezapomněli.

Typické chyby:

• Použití vlastnosti bez kontroly: 'kira.prezdivka' is possibly 'undefined'.
• Vložení do šablonového řetězce bez kontroly. Tam vám TypeScript nezabrání: z ${bruno.prezdivka} se stane text undefined.