React Frontend Developer

Question 1

Как работает type guards в TypeScript?

Accepted Answer

Type guards — это конструкции, которые позволяют проверять типы данных во время выполнения программы. Это важно для работы с union-типами, где необходимо знать точный тип данных в определенный момент.

Question 2

Что такое Type Guard и зачем он нужен

Accepted Answer

Type Guard — это проверка, которая позволяет TypeScript точно определить тип значения в конкретной ветке кода. Он используется при работе с union-типами, когда поведение зависит от реального типа данных. Type Guard делает код безопаснее и избавляет от лишних проверок и приведения типов. Он может быть встроенным или пользовательским.

Question 3

Для чего используется beforeRouteEnter?

Accepted Answer

beforeRouteEnter используется для выполнения логики до отображения компонента. В этом хуке ещё нет доступа к this. Он часто применяется для загрузки данных перед входом на страницу. После завершения навигации можно получить доступ к экземпляру компонента через callback. Это делает хук удобным для инициализации.

Question 4

Как определить, что значение типа unknown относится к конкретному именованному типу? Как реализовать type guard, чтобы TypeScript понимал, что проверка выполнена?

Accepted Answer

Для проверки значения типа unknown на соответствие конкретному типу используется пользовательский type guard — функция, возвращающая value is Type. Внутри такой функции выполняется проверка структуры объекта (например, с помощью typeof, instanceof или проверки наличия свойств). TypeScript понимает, что после вызова type guard в условном блоке значение считается принадлежащим указанному типу.

Question 5

Что может возвращать guard помимо true и false?

Accepted Answer

Guard может возвращать не только boolean, но и Observable, Promise и UrlTree. Если вернуть UrlTree, роутер отменит текущую навигацию и перенаправит пользователя по указанному адресу. Это удобно для редиректов прямо из guard, например на страницу логина. Также можно вернуть Observable или Promise, которые разрешатся в boolean или UrlTree.

Question 6

Что такое guard в Angular и для чего он используется?

Accepted Answer

Guard в Angular — это специальный сервис или функция, которая решает, можно ли перейти на маршрут или покинуть его. Он используется для проверки прав доступа, авторизации, сохранения несохранённых данных и других условий перед навигацией. Angular вызывает guard автоматически во время роутинга и, если он возвращает false или URL-дерево, отменяет или перенаправляет переход.

Question 7

Как реализовать guard, который проверяет авторизацию пользователя и при её отсутствии перенаправляет на страницу входа?

Accepted Answer

Guard — это компонент или функция, которая оборачивает защищённый маршрут и проверяет, авторизован ли пользователь. Если нет — выполняется перенаправление на страницу входа через Navigate или history.push. В React Router v6 это делается через компонент-обёртку с проверкой токена и возвратом . Такой подход централизует логику доступа и не дублирует проверки в каждой странице.

Вопросы React Frontend Developer