Что такое Пересечение (Intersection) в TypeScript?

Пересечение (Intersection) - мощный механизм TypeScript, который позволяет рассматривать множество типов данных, как один. Пересечение указывается с помощью оператора амперсанда &, по обе стороны от которого указываются типы данных.

Переменной, которой был указан тип пересечение A и B и С может быть присвоено значение, которое принадлежит к типам A и B и C одновременно.

type A = {
x: number
y: number
}

type B = {
y: number
z: number
}

type I = A & B

Переменная типа пересечения I может содержать объекты со свойствами типа A AND типа B (т. е. x, y и z; отсюда символ & ), который соответствует объединению свойств двух типов

Степени двойки

Напишите функцию, которая принимает неотрицательное целое число и возвращает массив из степеней двойки от 0 до входного числа.

Примеры
n = 0 ==> [1] # [2^0]
n = 1 ==> [1, 2] # [2^0, 2^1]
n = 2 ==> [1, 2, 4] # [2^0, 2^1, 2^2]

👉 @frontendInterview

👉 @frontendInterview

В чем разница между createElement() и cloneElement() в React?

JSX транспилируется в функции createElement() для создания элементов React, которые используются для объектного представления пользовательского интерфейса. А cloneElement() используется для клонирования элемента и передачи ему новых свойств.

👉 @frontendInterview

👉 @frontendInterview

​Что такое Объединение (Union Types) в TypeScript?

Объединение (Union), это механизм позволяющий создавать из множества существующих типов данных логическое условие, по которому данные могут принадлежать к одному из указанных типов. Объединение указывается с помощью оператора прямой черты |, по обе стороны которой, располагаются типы данных.

 let v1: T1 | T2 | T3;

Переменной, которой был указан тип объединения A или B или C может быть присвоено значение принадлежащие к одному из трех типов.

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

class Bird {
fly(): void {}
toString(): string {
return 'bird';
}
}
class Fish {
swim(): void {}
toString(): string {
return 'fish';
}
}
class Insect {
crawl(): void {}
toString(): string {
return 'insect';
}
}

function move(animal: Bird | Fish | Insect): void {
animal.fly(); // Error
animal.swim(); // Error
animal.crawl(); // Error

animal.toString(); // Ok, declared in all types
}

👉 @frontendInterview

​Назовите методы жизненного цикла в React версии 16.3+

getDerivedStateFromProps: запускается перед вызовом метода render() и при каждом повторном рендеринге. Он используется в редких случаях, когда нам требуется производное состояние. Для получения более подробной информации смотрите если вам требуется производное состояние

componentDidMount: выполняется после первого рендеринга, здесь выполняются AJAX-запросы, обновляется DOM или состояние компонента, регистрируются обработчики событий

shouldComponentUpdate: определяет, должен ли компонент обновляться. Значением по умолчанию является true. Если вы уверены в том, что компонент не нуждается в повторном рендеринге при изменении состояния или пропов, тогда можете вернуть ложное значение. Это подходящее место для улучшения производительности, позволяющее предотвратить ненужные рендеринги при получении компонентом новых пропов

getSnapshotBeforeUpdate: выполняется перед применением результатов рендеринга к DOM. Любое значение, возвращенное этим методом, передается в componentDidUpdate(). Это может быть полезным для получения информации из DOM, например, позиции курсора или величины прокрутки

componentDidUpdate: в основном, используется для обновления DOM в соответствии с изменением состояния или пропов. Не выполняется, если shouldComponentUpdate() возвращает false

componentWillUnmount используется для отмены сетевых запросов или удаления обработчиков событий, связанных с компонентом

👉 @frontendInterview

👉 @frontendInterview

Building Vue.js Applications with GraphQL (2021)

С момента своего выпуска Facebook в 2012 году GraphQL покорил Интернет штурмом. Огромные компании, такие как Airbnb и Audi, начали применять его, в то время как малые и средние компании теперь осознают его потенциал. С помощью рецептов, приведенных в этой книге, вы узнаете, как создать полноценное приложение-чат в реальном времени с нуля, используя GraphQL и Vue.js.

👉 @frontendInterview

Цифровизация

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

Примеры:
123 => [1,2,3]
1 => [1]
8675309 => [8,6,7,5,3,0,9]

👉 @frontendInterview

Pro React 16 (2019)

Если вы являетесь фронтенд разработчиком и желаете вырасти как специалист на рынке разработки, вам не обойтись без знания современных фреймворков, таких как Angular, React и Vue. В настоящем руководстве рассматривается последняя на данный момент, 16-я версия, фреймворка, из которого вы узнаете про основные особенности и практики работы с ним

👉 @frontendInterview

​В чем заключаются недостатки паттерна MVW?

MVW расшифровывается как Model-View-Whatever (Модель-Представление-Что угодно)

MVC - Model-View-Controller
MVP - Model-View-Presenter
MVVM - Model-View-ViewModel
MVW / MV* / MVx - Model-View-Whatever
HMVC - Hierarchical Model-View-Controller
MMV - Multiuse Model View
MVA - Model-View-Adapter

MVW легко управлять в простом приложении, содержащем несколько моделей/контроллеров. При росте приложения мы неизбежно сталкиваемся со следующими проблемами:

1. Модели/контроллеры взаимодействуют друг с другом (возможно, через сервисный слой). Эти модули меняют состояния друг друга. Чем больше модулей, тем легче утратить контроль над тем, кто изменил состояние того или иного модуля

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

3. Изменение состояния/модели добавляет еще один уровень сложности - мутацию. Требуется определить, каким образом изменяется состояние или модель, и какие инструменты необходимы для распознавания мутации

4. Представьте, каким сложным будет код совместно используемого приложения (такого как google docs, например), где множество данных меняется в режиме реального времени

5. Нет возможности отменять действия (возвращаться назад во времени) без добавления большого количества дополнительного кода

👉 @frontendInterview

👉 @frontendInterview

Почему название компонента в React должно начинаться с большой буквы?

В JSX имена тегов в нижнем регистре считаются названиями HTML-тегов. Существует одно исключение: имена с точкой (аксессор свойства).

Когда название элемента начинается с маленькой буквы, это указывает на встроенный элемент, такой как div или span, передаваемые в React.createElement(). Названия элементов, начинающиеся с большой буквы, указывают на созданный (пользовательский) или импортированный компонент.

<component /> компилируется в React.createElement('component') (HTML-тег)
<Component /> компилируется в React.createElement(Component)
<obj.component /> компилируется в React.createElement(obj.component)

👉 @frontendInterview