Необязательные свойства

Не у каждого героя есть прозвище. Если свойства может не быть, поставьте после его имени вопросительный знак — так же, как у необязательных параметров:

type Hero = { name: string; level: number; nickname?: string };

const kira: Hero = { name: "Кира", level: 3, nickname: "Быстрая Стрела" };
const bruno: Hero = { name: "Бруно", level: 2 };

console.log(bruno);
console.log(bruno.nickname);

Программа выведет:

{ name: "Бруно", level: 2 }
undefined

Необязательное свойство (optional property) можно не указывать в объекте, и TypeScript не считает его недостающим. Если его прочитать, получится значение или undefined, если свойства нет, — как и в JavaScript. Поэтому у bruno.nickname тип string | undefined, и прежде чем использовать его как строку, TypeScript требует проверки:

type Hero = { name: string; level: number; nickname?: string };

const kira: Hero = { name: "Кира", level: 3, nickname: "Быстрая Стрела" };
console.log(kira.nickname.toUpperCase());

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

У Киры прозвище есть, и всё же TypeScript сообщает об ошибке. Он смотрит не на значение, а на тип: kira — это Hero, а прозвища у героя может не быть. Проверьте его так же, как необязательный параметр:

type Hero = { name: string; level: number; nickname?: string };

function heroTitle(hero: Hero): string {
    if (hero.nickname === undefined) {
        return hero.name;
    }
    return `${hero.name} «${hero.nickname.toUpperCase()}»`;
}

console.log(heroTitle({ name: "Кира", level: 3, nickname: "Быстрая Стрела" }));
console.log(heroTitle({ name: "Бруно", level: 2 }));

Программа выведет:

Кира «БЫСТРАЯ СТРЕЛА»
Бруно

Необязательное свойство можно задать и позже: bruno.nickname = "Медведь"; — это нормально, ведь по типу у героя может быть прозвище. А свойство, которого нет в типе, добавить нельзя, как вы знаете.

Когда свойство должно быть необязательным? Когда его отсутствие — обычное дело: прозвище, слабость, оружие, которого у героя пока нет. Если свойство должно быть у каждого объекта, оставьте его обязательным. Тогда TypeScript проверит, что вы о нём не забыли.

Типичные ошибки:

• Использование свойства без проверки: 'kira.nickname' is possibly 'undefined'.
• Подстановка свойства в шаблонную строку без проверки. Здесь TypeScript вас не останавливает: ${bruno.nickname} превращается в текст undefined.