🛡️ TypeScript: безопасный доступ к вложенным свойствам

Никаких больше “Cannot read property of undefined”!

// Опасно
const city = user.address.city;
// Ошибка, если address === undefined

// Многословно
const city = user && user.address && user.address.city;

// Безопасно и элегантно
const city = user?.address?.city ?? 'Не указан’;

🔴 Optional chaining (?.)
Возвращает undefined, если слева null или undefined, и не пытается читать свойство дальше.

🔴 Nullish coalescing (??)
Возвращает правую часть только если слева null или undefined.

💡 Чем отличается от ||:

const volume = settings.volume ?? 0.5;
// Если volume = 0, вернёт 0 — корректно

const volume = settings.volume || 0.5;
// Если volume = 0, вернёт 0.5 — нежелательное поведение

✅ Где использовать:

— ответы API
— вложенные объекты конфигурации
— поля форм, которые могут отсутствовать
— опциональные коллбэки

🈁 Примеры:

// Массивы
const first = users?.[0]?.name ?? 'Гость';

// Функции
onClick?.();

// Сложные цепочки
const price = product?.variants?.[0]?.price?.amount ?? 0;

🐸 Библиотека фронтендера

#hotfix #ts

🔥 Каверзный вопрос с собеса по TypeScript

Типы any и unknown часто путают, но они работают совершенно по-разному!

🔍 Что происходит на самом деле:

any — «отключает» TypeScript

let value1: any = "hello";
value1.toUpperCase();  // TS не проверяет
value1.someMethod(); // TS разрешает всё
value1.foo.bar.baz;      // Никаких проверок

➕ TypeScript полностью доверяет вам и не проводит никаких проверок
➕ Это как "аварийный выход" из системы типов

unknown — «безопасный any»

let value2: unknown = "hello";
value2.toUpperCase();   // Ошибка компиляции!

// Нужна проверка типа:
if (typeof value2 === 'string') {
  value2.toUpperCase(); // Теперь работает
}

➕ TypeScript требует явной проверки типа перед использованием
➕ Это безопасный способ работы с неизвестными данными

🎯 Когда использовать:

any — когда:
— Мигрируете JS → TS постепенно
— Работаете с legacy-кодом
— Но помните: это технический долг!

unknown — когда:
— Парсите JSON с бэкенда
— Работаете с пользовательским вводом
— Получаете данные из внешних API
— Обрабатываете ошибки в catch

✅ Best practice:

// Плохо
function parseResponse(response: any) {
  return response.data.user.name;
}

// Хорошо
function parseResponse(response: unknown) {
  if (
    response &&
    typeof response === 'object' &&
    'data' in response
  ) {
    // Type guard для безопасной работы
    return (response as {data: {user: {name: string}}}).data.user.name;
  }
  throw new Error('Invalid response');
}

❗️ unknown заставляет вас думать о безопасности типов, any — отключает эту защиту.

🐸 Библиотека фронтендера

#career_merge #ts #middle

Летим зимовать ✈️

Когда холодает, айтишники пакуют чемоданы, а мы разыгрываем ваучер на 50 000 рублей в Островке.

Поехать к морю или остаться среди снежных пейзажей — выбирайте сами!

Чтобы участвовать, нужно оставить любую реакцию под этим постом и подписаться на каналы ниже:

😎 Типичный программист
🐸 Библиотека программиста
🟢 Ostrovok! Tech

Теперь осталось нажать на кнопку участия под этим постом и вы в игре!

Итоги подведём 12 декабря. Победителя выберем с помощью бота. Подробнее с правилами можно ознакомиться здесь.

Всем удачи!

Участников: 111
Призовых мест: 1
Дата розыгрыша: 19:00, 12.12.2025 MSK (3 дня)

💡 Новое в CSS: автоматическая подгонка текста под контейнер

В Chrome Canary 145 появились свойства, которые позволяют нативно растягивать или ужимать текст под ширину блока — без JS.

h1 {
  text-grow: per-line scale;
}

ℹ️ Что добавили:

• text-grow — растягивает короткие строки
• text-shrink — ужимает длинные

ℹ️ Методы подгонки:

scale, scale-inline, font-size, letter-spacing

По сути, это нативный FitText.js, только одной строкой CSS.

🐸 Библиотека фронтендера

#release_digest #readme #css