Сегодня база про 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

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

Что выведет этот код?

var a = 5;

function f() {
  if (a) {
    console.log(a);
    var a = 10;
  }
}

f();

Ответ:
Ничего не будет выведено.

Разбор:
1. Переменная a внутри функции f поднимается в начало функции, но её значение остаётся undefined до строки var a = 10;.
2. В условии проверяется undefined, поэтому console.log(a) не вызывается.

Почему так?
Переменные, объявленные через var, поднимаются в начало области видимости, но их значение присваивается только на момент выполнения строки с присваиванием.

#JavaScript #interview

Почти каждый из нас работает с TypeScript, и большинство сталкивалось с пересечением типов.

Что такое пересечение типов?
Пересечение типов позволяет объединить несколько типов в один. Это означает, что переменная будет иметь свойства всех типов, которые пересекаются.

interface Employee {
  name: string;
  position: string
}

interface ContactInfo {
  email: string;
  phone: string
}

type EmployeeContact = Employee & ContactInfo;

const employee: EmployeeContact = {
  name: 'Иван',
  position: 'Разработчик',
  email: 'ivan@google.com',
  phone: '+7(900)-000-0000'
};

Тип EmployeeContact включает в себя как поля из типа Employee, так и поля из типа ContactInfo.

Важно
Когда два типа имеют одинаковые поля с различными типами, это приводит к ошибке. В TypeScript такие поля получают тип never, что делает невозможным присваивание значений.

#typescript

Сделал небольшую шпаргалку со всеми типами инпутов

Ссылка на шпаргалку: CodePen