Сегодня поговорим о еще одном полезном утилити-типе в TypeScript — Record<Keys, Type>. Этот тип позволяет создавать объекты с определенными ключами и значениями

Что такое Record?
Record<Keys, Type> — это утилита, которая создает объектный тип, где:
- Keys — набор ключей (обычно строковые литералы или объединение строк).
- Type — тип значений, которые будут связаны с этими ключами.

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

Пример использования
Предположим, у нас есть список цветов, и мы хотим связать каждый цвет с его HEX-кодом:

type Colors = 'red' | 'green' | 'blue';

type ColorHex = Record<Colors, string>;

const colorCodes: ColorHex = {
  red: '#FF0000',
  green: '#00FF00',
  blue: '#0000FF',
};

Что происходит:
- Мы определили тип Colors, который является объединением строковых литералов ('red', 'green', 'blue').
- Использовали Record, чтобы создать объект, где каждому ключу из Colors соответствует строковое значение (HEX-код).

Теперь TypeScript гарантирует, что:
- Все ключи из Colors присутствуют в объекте.
- Значения имеют тип string.

Используйте Record, когда вам нужно описать объект с заранее известными ключами и типами значений.

#typescript

Начинаем с поста о малоизвестном свойстве у input — valueAsNumber. Оно позволяет работать с числами напрямую, без ручного преобразования типов.

Что это за свойство?
Когда вы используете <input type="number">, значение по умолчанию возвращается как строка:

const value = input.value;
console.log(typeof value); // "string"

Чтобы получить число, чаще всего используют Number(value) или parseFloat(value).

Но есть более нативный способ — valueAsNumber:

const numberValue = input.valueAsNumber;
console.log(typeof numberValue); // "number"

Что будет при некорректном вводе?
Если поле пустое или в нём невалидное значение, valueAsNumber вернёт NaN. Это нужно учитывать при работе с данными:

if (!Number.isNaN(numberValue)) {
  // значение можно использовать
} else {
  // обработка ошибки
}

Про работу с числами я писал в этом(тык) посте.

Когда стоит использовать:
- При работе с числовыми значениями из форм
- Чтобы избежать лишнего преобразования типов
- Для более чистого кода

#JavaScript

Сегодня разбираем задачу с собеседования про цепочку промисов.
Промисы — это база для любого собеседования. На первый взгляд легко, но многие путаются из-за спешки или невнимательности.

Что выведет этот код в консоль?

Promise.resolve(123)
  .then((x) => x + 1)
  .catch((x) => x + 2)
  .then((x) => x + 3)
  .then((x) => console.log(x));

Ответ: 127

Объяснение:
1. Promise.resolve(123) — промис сразу выполняется со значением 123.
2. .then((x) => x + 1) — прибавляем 1 к 123.
3. .catch((x) => x + 2) — пропускается, так как ошибки не было.
4. .then((x) => x + 3) — прибавляем 3 к 124.
5. .then(console.log) — выводим в консоль 127.

Важно:
catch срабатывает только при необработанной ошибке. В нашем случае ошибок нет, значит пропускаем.

#interview #JavaScript

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

Что за хук?
useDeferredValue — это хук из React 18, который позволяет "откладывать" обновление части интерфейса. Он принимает значение и возвращает его "отложенную" версию. Это значение обновляется только после того, как React завершит рендеринг более приоритетных задач.

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

import { useState, useDeferredValue } from "react";

function App() {
  const [query, setQuery] = useState("");
  const deferredQuery = useDeferredValue(query);

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Введите текст"
      />
      <List query={deferredQuery} />
    </div>
  );
}

function List({ query }) {
  const items = Array.from({ length: 1000 }, (_, i) => `Item ${i}`);
  const filteredItems = items.filter((item) =>
    item.toLowerCase().includes(query.toLowerCase())
  );

  return (
    <ul>
      {filteredItems.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

Как это работает?
1. Пользователь вводит текст в инпут.
2. Состояние query обновляется сразу, но deferredQuery обновляется с задержкой.
3. Компонент List использует deferredQuery, чтобы отфильтровать элементы. Благодаря этому:
— Инпут не зависает.
— Фильтрация списка происходит чуть позже, когда React "освободится".

Когда использовать?
— Если у вас есть большие списки или сложные вычисления , которые могут замедлить интерфейс.
— Если нужно отложить обновление части UI, чтобы не блокировать основной поток.

#react #BestPractices

Инструмент недели — CSS Loaders

Мы часто сталкиваемся с проблемой отображения состояния загрузки. На CSS Loaders собраны готовые анимации лоадеров и все они на чистом CSS

Посмотреть можно тут: css-loaders.com

#css

Сегодня база про cookie. Мы работаем с ними каждый день, и про них спрашивают почти на каждом собеседовании.

Что такое cookie?
Cookie — это строка с данными, которую браузер сохраняет и автоматически отправляет серверу при каждом HTTP-запросе.

Как устанавливаются куки?

document.cookie = "token=abc123; path=/; max-age=3600";

Как еще можно установить?
Куки могут быть установлены сервером через HTTP-ответы с помощью заголовка Set-Cookie. Когда сервер хочет установить куку на клиенте, он отправляет этот заголовок в ответе на запрос.

Свойства:
1. path: Определяет путь, для которого кука будет доступна. По умолчанию: / — доступна на всем сайте.

2. expires: Устанавливает дату истечения срока действия куки. По умолчанию: кука сессионная и удаляется при закрытии браузера.

3. max-age: Устанавливает время жизни куки в секундах. По умолчанию: не указан, кука сессионная.

4. secure: Указывает, что кука будет передаваться только по HTTPS. По умолчанию: не установлен, кука будет передаваться как по HTTP, так и по HTTPS.

5. samesite: Определяет, можно ли отправлять куку с запросами на другие сайты. По умолчанию: не указан, кука отправляется с запросами как с того же сайта, так и с внешних источников.

6. httpOnly: Указывает, что кука будет доступна только для сервера и не может быть прочитана через JavaScript. Это улучшает безопасность, предотвращая атаки. По умолчанию: не установлен.

Удаление cookies:
Можно удалить куку, установив её с датой, которая уже прошла, или задать значение max-age равным 0 или отрицательным числом.

Особенности:
1. Максимальный размер не должен превышать 4 KB.
2. Куки отправляются на каждый запрос.

#JavaScript

Один из моих любимых утилити-типов в TypeScript — ReturnType. Сегодня пост о нём.

Что делает ReturnType?
ReturnType<T> — извлекает тип возвращаемого значения из функции T.

Пример:

function getUser() {
  return { id: 1, name: 'Василий' };
}

type User = ReturnType<typeof getUser>;
// { id: number, name: string }

Теперь User всегда будет соответствовать тому, что возвращает getUser.

Где применять?
У меня есть идеальный кейс на одном из проектов: компонент, который завязан на данные из хука. Тут идеально подходит ReturnType — можно получить тип возвращаемого значения хука и использовать его в пропсах компонента.

Что-то на подобии такого:

// Какой-то хук с логикой
function useUserData() {}

// Пропсы компонента
interface Props {
  data: ReturnType<typeof useUserData>;
};

function UserInfo({ data }: Props) {}

Конечно, мы можем создать отдельный тип и использовать его и в хукe, и в компоненте, но тогда при изменениях придётся править в нескольких местах.

interface User {}

function useUserData(): User {}

interface Props {
  data: User;
};

function UserInfo({ data }: Props) {}

Это не единственное применение ReturnType. Главное знать о его существовании и сами найдете применение в своем проекте)

#typescript