Во многих случаях при разработке на TypeScript приходится работать с объектами, у которых свойства могут быть не установлены. Для таких случаев в TypeScript предусмотрена возможность помечать свойства как опциональные, добавляя к их именам знак вопроса (?).

Пример определения интерфейса с опциональными свойствами

Давайте рассмотрим пример, где мы определяем интерфейс PaintOptions с двумя опциональными свойствами:

interface PaintOptions {
  shape: Shape;
  xPos?: number;
  yPos?: number;
}

В этом интерфейсе shape является обязательным свойством, тогда как xPos и yPos являются опциональными и могут быть не указаны.

Работа с опциональными свойствами

Функция paintShape принимает объект типа PaintOptions. В зависимости от предоставленных данных, функция может обрабатывать различные случаи:

function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos === undefined ? 0 : opts.xPos;
  let yPos = opts.yPos === undefined ? 0 : opts.yPos;
  console.log(`Отрисовка фигуры на позиции: x=${xPos}, y=${yPos}`);
}

const shape = getShape();
paintShape({ shape });
paintShape({ shape, xPos: 100 });
paintShape({ shape, yPos: 100 });
paintShape({ shape, xPos: 100, yPos: 100 });

Каждый вызов функции paintShape валиден. Если свойство указано, оно должно соответствовать объявленному типу. Если не указано — TypeScript рассматривает его как undefined.

Работа с strictNullChecks

В режиме strictNullChecks TypeScript уведомит, что свойства xPos и yPos могут быть не определены. Это значит, что при их использовании следует учитывать возможность значения undefined:

function paintShape(opts: PaintOptions) {
  let xPos = opts.xPos;
  let yPos = opts.yPos;
  // Дополнительная обработка, если требуется
}

Использование значений по умолчанию

Часто встречающимся паттерном в JavaScript и TypeScript является установка значений по умолчанию для неопределенных свойств:

function paintShape({ shape, xPos = 0, yPos = 0 }: PaintOptions) {
  console.log(`x координата: ${xPos}`);
  console.log(`y координата: ${yPos}`);
}

Здесь использована деструктуризация параметра функции с предоставлением значений по умолчанию для xPos и yPos. Это делает эти параметры фактически всегда определенными в теле функции paintShape, но их указание при вызове функции остается опциональным.

Вывод

Использование опциональных свойств в TypeScript позволяет сделать код более гибким и безопасным. Оно упрощает обработку данных, где некоторые значения могут отсутствовать, и позволяет ясно определить, какие свойства являются необходимыми, а какие — нет. Это повышает качество кода и уменьшает возможность возникновения ошибок.