React Frontend Developer

Question 1

Что такое Vanilla Extract и чем он отличается от CSS-in-JS?

Accepted Answer

Vanilla Extract — это инструмент для написания CSS с помощью TypeScript, который генерирует обычный CSS на этапе сборки. В отличие от классического CSS-in-JS, стили не создаются в рантайме и не требуют выполнения JS в браузере. Это даёт лучшую производительность и типизацию, но меньше гибкости для динамических стилей. По сути, это “типизированный CSS”, а не стили, живущие в JS во время выполнения.

Question 2

В чём преимущество build-time CSS над runtime-CSS?

Accepted Answer

Build-time CSS генерируется во время сборки и доставляется браузеру как обычные CSS-файлы. Это быстрее, потому что браузеру не нужно выполнять JS для создания стилей. Такой подход уменьшает размер JS-бандла и улучшает время первого рендера. Runtime-CSS даёт больше гибкости, но платит за это производительностью.

Question 3

Как решается проблема несовпадения серверных данных и TypeScript-типов?

Accepted Answer

Проблема решается через явную валидацию данных во время выполнения. Обычно используют схемы валидации или ручные проверки. TypeScript-типы дополняются runtime-проверками, чтобы убедиться, что данные соответствуют ожиданиям. Также помогают единые контракты между сервером и клиентом. Это снижает количество скрытых ошибок.

Question 4

Какие ограничения TypeScript существуют относительно runtime?

Accepted Answer

TypeScript — это статический анализатор, который работает только на этапе компиляции. Все типы, интерфейсы и аннотации удаляются при транспиляции в JavaScript, поэтому в рантайме никакой типизации нет. Это означает, что проверки типов не выполняются во время выполнения программы, и ошибки, связанные с типами, могут проявиться только в процессе работы.

Question 5

Какие проверки типов доступны во время runtime?

Accepted Answer

В JavaScript во время выполнения доступны операторы typeof и instanceof. typeof возвращает строку с типом примитива, например 'string' или 'number'. instanceof проверяет, принадлежит ли объект к определённому классу или функции-конструктору. Также можно использовать Object.prototype.toString.call() для точного определения встроенных типов.

Question 6

Почему interface нельзя проверить во время runtime?

Accepted Answer

TypeScript — это надстройка над JavaScript, которая добавляет статическую типизацию. Однако во время компиляции TypeScript транспилируется в JavaScript, и все аннотации типов, включая интерфейсы, удаляются. JavaScript не имеет встроенной системы типов, поэтому проверить существование или структуру интерфейса во время выполнения невозможно.

Question 7

Как организуются runtime-проверки в TypeScript?

Accepted Answer

TypeScript не предоставляет встроенных runtime-проверок, так как его система типов работает только на этапе компиляции. Для проверок во время выполнения используются пользовательские type guards, discriminated unions или библиотеки вроде zod и io-ts. Type guards — это функции, возвращающие boolean и использующие ключевое слово 'is' для сужения типа.

Вопросы React Frontend Developer