Привет! Хотя регулярность постов и изменилась, неделя по-прежнему начинается с разбора задач с собеседований)

У нас есть пример типизированого массива:

interface Student {
  name: string;
  age: number;
  hasScar: boolean;
}

const students: Student[] = [
  { name: "Harry", age: 17, hasScar: true },
  { name: "Ron", age: 17, hasScar: false },
  { name: "Hermione", age: 16, hasScar: false },
];

И дана функция поиска по массиву, которую нужно типизировать:

function getBy(arr, prop, value) {
  return arr.find(item => item[prop] === value) || null;
}

Пример использования этой функции с массивом:

const result = getBy(students, "name", "Hermione");
console.log(result);

Задача:
Типизировать функцию getBy.

Решение:

function getBy<T, K extends keyof T>(arr: T[], prop: K, value: T[K]) {
  return arr.find(item => item[prop] === value) || null;
}

1. <T, K extends keyof T> — дженерик:
- T — это универсальный тип, который представляет тип объекта внутри массива arr.
- K extends keyof T — означает, что K — это ключ объекта T. Тип keyof T — это объединение всех ключей объекта T.

2. Параметры функции:
- arr: T[] — массив объектов типа T.
- prop: K — ключ, по которому будем искать совпадение.
- value: T[K] — значение, с которым будем сравнивать. Тип значения автоматически подтягивается из типа свойства prop.


Вот и все) Мы типизировали функцию с помощью дженериков и сделали её универсальной для любых подобных массивов. Теперь мы можем гарантировать, что функция будет принимать только валидные аргументы.
В этом примере я не указал явно тип возвращаемого значения, так как TypeScript подтянет его автоматически. Но если функция будет меняться, лучше явно прописывать возвращаемый тип, чтобы избежать случайных ошибок в будущем.

#JavaScript #interview #typescript

Когда мы пишем приложения, важно обеспечить их стабильность, расширяемость и простоту поддержки. В этом посте узнаем про принципы SOLID, которые помогают с этим)
Используя SOLID-принципы, вы пишете код, который легче тестировать, поддерживать и развивать.


SOLID — это аббревиатура, которая объединяет 5 принципов:

S - Single Responsibility Principle (Принцип единой ответственности)
Каждый класс или компонент должен отвечать только за одну задачу. Это упрощает тестирование и отладку, потому что если что-то идет не так, вы точно знаете, какой класс или компонент за это отвечает. Такой подход также облегчает расширение приложения, так как изменение в одном месте не затронет другие части.

O - Open/Closed Principle (Принцип открытости/закрытости)
Классы должны быть открыты для расширения, но закрыты для модификации. Это означает, что вы можете добавлять новый функционал, не изменяя существующий код. Это достигается через использование абстракций, таких как интерфейсы и наследование.

L - Liskov Substitution Principle (Принцип подстановки Лисков)
Объекты базового класса должны быть заменяемыми объектами производного класса без нарушения корректности программы. Другими словами, наследуемые классы должны вести себя как их базовые классы, чтобы не ломать логику приложения.

I - Interface Segregation Principle (Принцип разделения интерфейсов)
Не стоит создавать универсальные интерфейсы, которые будут иметь множество методов, не используемых в разных классах. Лучше создавать несколько более специализированных интерфейсов. Это уменьшает зависимость классов и облегчает поддержку кода.

D - Dependency Inversion Principle (Принцип инверсии зависимостей)
Высокоуровневые модули не должны зависеть от низкоуровневых, а обе эти категории должны зависеть от абстракций. Это позволяет сделать код гибким и менее зависимым от конкретных реализаций.

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

#BestPractices

Сегодня у нас очередная задача с собеседования, связанная с рекурсией)

Задача:
Нужно распарсить вложенный объект, чтобы получить значение самого глубокого уровня.

Пример вызова функции:

const obj = { red: { fast: { fancy: { car: "lamba" } } } };

console.log(objParse(obj)); // "lamba"

Решение:

function objParse(obj) {
  const [value] = Object.values(obj); // 1, 2

  if (typeof value !== "object") { // 3
    return value;
  }

  return objParse(value); // 4
}

1. Object.values(obj) возвращает массив всех значений объекта.
2. Берём первое значение — value.
3. Если это значение — не объект, возвращаем его.
4. Если это объект, вызываем objParse рекурсивно.

Для кого-то эта задача может показаться совсем простой, но на практике некоторые мидлы задумываются над ней.

#interview #JavaScript

Работа с API, кэширование, обновление данных и обработка ошибок — всё это неизбежно возникает в любом приложении. На выбор у нас есть много подходов и инструментов. Один из таких — React Query.

Что такое React Query?
Это библиотека для управления данными в React-приложениях. Она помогает работать с запросами и решает типичные задачи, связанные с их загрузкой, кэшированием, обновлением и обработкой ошибок.

Какие проблемы решает?
1. Вместо написания шаблонного кода для запросов, состояний и обработки ошибок — можно использовать готовые хуки.
2. Данные автоматически кэшируются, и повторные запросы выполняются только при необходимости.
3. Готовые состояния и возможность легко повторить запрос.
4. Минимизирует количество запросов к API за счет кэширования и умной стратегии обновления.
5. Реализация сложных сценариев становится проще.

Как использовать React Query?
1. Установите библиотеку в проект:

npm install @tanstack/react-query

2.Оберните приложение в QueryClientProvider:

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Component />
    </QueryClientProvider>
  );
}

3. Используйте хуки:
useQuery для загрузки данных:

const { data, isLoading, error } = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodos,
});

useMutation для изменения данных:

const { mutate } = useMutation({
  mutationFn: updateTodo,
});

mutate({ id: 1, text: 'Updated Todo' });

Преимущества React Query
- Автоматическое кэширование и минимизация запросов.
- Простая обработка ошибок и состояний.
- Гибкость и удобство настройки под любые задачи.

Когда использовать React Query?
- Если проект работает с API.
- Если нужно кэшировать данные и минимизировать количество запросов.


#react #api

Вы наверняка видели OTP-поля для ввода кодов. А знаете, как они делаются?
Сегодня разберёмся, как они делаются с помощью атрибута size.

Что делает атрибут size?
Атрибут size указывает примерное количество видимых символов в поле ввода. Это влияет только на ширину, но не ограничивает количество вводимых символов.

<input type="text" size="6">

Поле будет визуально рассчитано примерно на 6 символов.

Пример
Один из частых кейсов — OTP-поля. Мы хотим, чтобы каждое поле занимало ровно одно место:

<input type="text" size="1" maxlength="1">
<input type="text" size="1" maxlength="1">
<input type="text" size="1" maxlength="1">
<input type="text" size="1" maxlength="1">

1. Атрибут size="1" делает поле под один символ.
2. maxlength="1" ограничивает ввод до одного символа.

Демо: CodePen

Ограничения и фишки:
1. Работает с типами: text, search, tel, url, email, password
2. Не ограничивает ввод — для этого есть maxlength
3. CSS width перекроет size, если задать оба

#HTML #CSS #BestPractices

Недавно мы разбирали(тык) работу с ошибками в JS.
Сегодня рассмотрим создание кастомных ошибок. Они позволяют точнее описывать, что именно пошло не так, и обрабатывать ошибки более точечно.

Вместо обычного Error можно создать свой класс, унаследованный от него:

class ValidationError extends Error { // 1
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

function validateUser(user) { // 2
  if (!user.name) {
    throw new ValidationError("Поле 'name' обязательно");
  }
}

try {
  validateUser({}); // 3
} catch (error) {
  if (error instanceof ValidationError) { // 4
    console.error("Ошибка валидации:", error.message);
  } else {
    throw error;
  }
}

Что происходит?
1. Мы наследуемся от встроенного Error, чтобы определить новый тип ошибки — ValidationError.

2. Функция validateUser проверяет, есть ли у объекта поле name. Если его нет — выбрасывает кастомную ошибку ValidationError с понятным сообщением.

3. В блоке try вызываем validateUser, передавая объект без name.

4. В блоке catch ловим ошибку и проверяем, является ли она экземпляром ValidationError с помощью instanceof.

Зачем это нужно?
1. Проще различать типы ошибок
2. Можно точечно обрабатывать нужные ошибки с помощью instanceof.
3. Можно сделать более детальные ошибки.

#JavaScript #BestPractices