Дмитрий Нечаев
Опциональные свойства в TypeScript
Во многих случаях при разработке на 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 позволяет сделать код более гибким и безопасным. Оно упрощает обработку данных, где некоторые значения могут отсутствовать, и позволяет ясно определить, какие свойства являются необходимыми, а какие — нет. Это повышает качество кода и уменьшает возможность возникновения ошибок.
Карта развития разработчика
Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile