Ошибка TypeScript: Type 'string | undefined' is not assignable to type 'string' — как исправить?

Проблема: TypeScript защищает от потенциальных ошибок

Ошибка возникает потому, что TypeScript — это строго типизированный язык, который помогает избежать ошибок во время выполнения. В вашем случае inputElement.value имеет тип string | undefined, потому что TypeScript учитывает возможность, что элемент может не иметь атрибута value (например, если это <div> или элемент удалён из DOM). Даже если вы уверены, что элемент существует, TypeScript этого не знает и требует явной обработки.

Вот три основных способа решить проблему:

1. Оператор утверждения (Non-null assertion) — !

Если вы абсолютно уверены, что значение не может быть undefined, используйте оператор !:

const value = inputElement.value!; // string
const length = getLength(value); // OK

Минус: Если вы ошиблись, в рантайме будет ошибка. Используйте только когда уверены на 100%.

2. Проверка на undefined (Type guard)

Самый безопасный способ — проверить значение перед использованием:

const value = inputElement.value;
if (value !== undefined) {
  const length = getLength(value); // TypeScript знает, что здесь value — string
  console.log(length);
} else {
  console.log('Значение отсутствует');
}

Этот подход гарантирует, что код не упадёт, если вдруг значение undefined.

3. Значение по умолчанию (Default value)

Используйте оператор ?? (nullish coalescing), чтобы задать значение по умолчанию:

const value = inputElement.value ?? ''; // если undefined, то пустая строка
const length = getLength(value); // OK

Это удобно, когда вы хотите продолжить работу даже при отсутствии значения.

Рекомендация для новичков

Начните с проверки на undefined (вариант 2) — это самый надёжный способ. Со временем вы научитесь выбирать подходящий метод в зависимости от контекста.

Вот полный исправленный пример:

function getLength(text: string): number {
  return text.length;
}

const inputElement = document.getElementById('myInput') as HTMLInputElement;
const value = inputElement.value;

// Безопасная проверка
if (value !== undefined) {
  const length = getLength(value);
  console.log(length);
} else {
  console.log('Input не имеет значения');
}

function getInputValue(id: string): string {
  const element = document.getElementById(id) as HTMLInputElement | null;
  if (!element) {
    throw new Error(`Элемент с id "${id}" не найден`);
  }
  return element.value ?? '';
}

// Использование
const value = getInputValue('myInput'); // всегда string
const length = getLength(value); // OK