При работе с экосистемой TypeScript часто встречаются различные операторы и символы, которые могут быть незнакомы разработчикам, работающим на чистом JavaScript. Одним из таких операторов является восклицательный знак (!), в просторечии известный как оператор «бэнг». В контексте TypeScript он имеет особое и существенное значение. В этой статье рассматриваются назначение и варианты использования оператора ! в TypeScript.

Проблема: неопределенные и нулевые значения

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

Давайте рассмотрим простой пример:

let name: string;
name = null;  // Error: Type 'null' is not assignable to type 'string'.

Ошибка очевидна; вы не можете присвоить null string, если это явно не разрешено.

Введите ненулевой оператор утверждения (!)

Иногда, будучи разработчиками, мы знаем о своем коде и его поведении больше, чем средство проверки типов TypeScript. Мы можем быть уверены, что конкретная переменная не будет null или undefined в данном контексте, даже если TypeScript считает иначе.

В таких сценариях мы можем использовать оператор постфиксного выражения !, чтобы утверждать, что его операнд не нулевой и не неопределенный.

function getNameLength(name: string | null): number {
    return name!.length;
}

В приведенном выше коде мы утверждаем, что name не равно нулю, когда вызываем для него .length.

Внимание: используйте с осторожностью

Хотя оператор ненулевого утверждения может быть удобным, важно использовать его разумно. Злоупотребление им может свести на нет цель системы проверки типов TypeScript. Это все равно, что сказать TypeScript: «Поверьте мне, я знаю, что делаю». Но если вы ошибетесь, это может привести к ошибкам во время выполнения.

Вот наглядный пример:

function printName(name: string | null): void {…