Чем отличаются x?: string и x: string | undefined в TypeScript? Когда это различие может стать проблемой?

Основное различие

В TypeScript x?: string объявляет необязательное свойство, которое может быть опущено при создании объекта. x: string | undefined требует, чтобы свойство присутствовало, но его значение может быть undefined. По умолчанию TypeScript считает эти типы эквивалентными, но с флагом exactOptionalPropertyTypes они становятся различными.

Пример кода

interface A { x?: string }
interface B { x: string | undefined }

const a: A = {}; // OK
const b: B = {}; // Ошибка: свойство x отсутствует

const a2: A = { x: undefined }; // OK без exactOptionalPropertyTypes, ошибка с ним
const b2: B = { x: undefined }; // OK всегда

Когда это важно

Различие критично при работе с JSON API, где отсутствие поля и null/undefined могут иметь разный смысл. Например, при сериализации объекта с необязательным полем оно может быть опущено, а с undefined — включено в JSON как undefined (что часто приводит к ошибкам). Также это влияет на проверку типов в строгих режимах компиляции.

Вывод

Используйте x?: string для полей, которые могут отсутствовать, и x: string | undefined для полей, которые должны присутствовать, но могут быть неопределенными. Включайте exactOptionalPropertyTypes для более строгой проверки и избегайте неявных ошибок при работе с внешними данными.