Оператор ! (восклицательный знак) в TypeScript: что он делает при обращении к свойству?

Что такое оператор ! (non-null assertion) в TypeScript?

Это оператор утверждения ненулевого значения (non-null assertion operator). Он говорит компилятору TypeScript: "Я точно знаю, что это значение не null и не undefined, не проверяй его". Это не runtime-оператор — он полностью исчезает после компиляции в JavaScript и не влияет на выполнение кода.

Как это работает?

Когда вы пишете name!.toUpperCase(), вы буквально говорите компилятору: "Убери из типа null и undefined, я отвечаю за это". Вот пример:

function getLength(str: string | null): number {
  // Без ! будет ошибка: Object is possibly 'null'
  return str!.length; // Мы утверждаем, что str не null
}

После компиляции в JavaScript код станет просто str.length — никакой проверки не будет.

Когда это уместно использовать?

• Когда вы точно знаете, что значение не null, но TypeScript не может это вывести.
• При работе с DOM — например, document.getElementById('myId')! когда вы уверены, что элемент существует.
• В цепочках вызовов после проверки условия:

let user: User | null = getUser();
if (user) {
  // TypeScript уже знает, что user не null
  console.log(user.name); // безопасно
}
// Но если вы точно знаете, что после if значение не изменилось:
processUser(user!); // утверждение

Чем отличается от `as`?

Оператор as (type assertion) может изменить тип на любой другой, даже несовместимый. ! работает только с null/undefined:

let value: string | null = "hello";
let a = value!;        // тип: string (убрали null)
let b = value as number; // тип: number (но это ложь!)

Почему это опасно?

Если вы ошиблись и значение на самом деле null — вы получите runtime-ошибку Cannot read property 'toUpperCase' of null. TypeScript не сгенерирует никакой защиты. Используйте ! только когда уверены на 100%.

Лучшие практики

• Предпочитайте реальные проверки: if (name) { ... }
• Используйте optional chaining: name?.toUpperCase() — безопасно вернёт undefined
• Для DOM используйте проверки или non-null assertion только в крайнем случае
• Настройте ESLint правило @typescript-eslint/no-non-null-assertion, чтобы запретить его в коде

Пример из реального проекта

// Плохо: рискованно
const button = document.querySelector('.submit-btn')!;
button.addEventListener('click', handleClick);

// Хорошо: с проверкой
const button = document.querySelector('.submit-btn');
if (button) {
  button.addEventListener('click', handleClick);
}

// Допустимо, если вы точно знаете, что элемент есть
// (например, в React useEffect после монтирования)

В итоге: ! — это инструмент для обхода строгой типизации. Используйте его осознанно и редко, как "аварийный люк", а не повседневный инструмент.

// Использование ! (утверждение)
const len = str!.length; // если str null — ошибка

// Использование ?? (защита)
const len = (str ?? "").length; // безопасно, всегда строка