JavaScript и Vue 3: типобезопасная проверка правдивости переменных

Привет.

В JavaScript есть несколько вариантов проверки значения для условий. Каждый метод имеет свои нюансы, и важно применять их к месту. Но JavaScript — тот ещё способ выстрелить себе в ногу.

Недавно я переводил один проект с Vue 2 на Vue 3. Основной технической задачей был перевод компонентов на Composition API. Всё было здорово, особенно вкупе с TypeScript: с его помощью я обнаружил много недочётов. Но вместе с этим появилась новая проблема: поведение UI стало неверным. После непродолжительной отладки я обнаружил, в чём проблема. Давайте взглянем на следующий код:

// Создание реактивной переменной
const isLoading = ref(false)

// Проверка условия
if (isLoading) {
    //
}

Этот код легко читается и с точки зрения типов всё корректно. Тем не менее, здесь содержалась ошибка. Дело в том, что условие всегда было истинно. Это происходит потому, что функция ref из состава Vue возвращает Proxy, который при приведении к булевому значению всегда будет равен true.

Понадобилось сделать следующие изменения, чтобы код работал корректно:

// Создание реактивной переменной
const isLoading = ref(false)

// Проверка условия
if (isLoading.value) {
    //
}

Такого бы не произошло, если бы… нет, не если бы проект был покрыт интеграционными тестами. Такого бы не произошло, если бы я использовал явное сравнение.

// Создание реактивной переменной
const isLoading = ref(false)

// Проверка условия
if (isLoading === true) { // TypeScript указал бы на несоответствие типов
    //
}

Вывод

Программистам нравится сокращать свой код, но иногда это играет не на пользу. Лучше пожертвовать лаконичностью и написать более типобезопасный код.