Поддерживает ли TypeScript все принципы объектно-ориентированного программирования?

Да, поддерживает. Существуют четыре основных принципа объектно-ориентированного программирования:

- Инкапсуляция
- Наследование
- Абстракция
- Полиморфизм

#вопросы_по_typescript

Что такое «генератор»?

Генераторы — это функции, из которых можно «выходить», и в которые можно «входить» по мере необходимости. Их контекст (привязки переменных) сохраняется между сеансами "входа" в них. Генераторы объявляют с использованием ключевого слова function*. Такая функция, при её первом вызове, не выполняет код, возвращая особый объект, генератор, который позволяет управлять её выполнением. Для получения очередного значения, выдаваемого генератором, нужно вызвать его метод next(). Благодаря этому выполняется код функции до тех пор, пока в нём не встретится ключевое слово yield, возвращающее значение.

Функцию-генератор можно вызывать сколько угодно раз. Каждый раз будет возвращаться новый генератор. Но каждый генератор можно обойти лишь один раз.

#вопросы_по_javascript

Что такое чистая функция?

Чистая функция не изменяет свой ввод. Он всегда возвращает одно и то же значение для одного и того же ввода. В React компонент должен быть чистой функцией по отношению к своим свойствам. Это означает, что для конкретного пропса визуализированный компонент всегда будет одинаковым.

#вопросы_по_react

Как перегрузить функцию?

Чтобы перегрузить функцию в TypeScript, просто создайте две функции с одним и тем же именем, но с разными типами аргументов / возвращаемых значений. Обе функции должны принимать одинаковое количество аргументов. Это важная часть полиморфизма в TypeScript.

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

function add(a: string, b: string): string;

function add(a: number, b: number): number;

function add(a: any, b: any): any {
return a + b;
}

add("Hello ", "Steve"); // returns "Hello Steve"
add(10, 20); // returns 30

#вопросы_по_typescript

Почему результатом сравнения двух похожих объектов является false?

В JS объекты и примитивы сравниваются по-разному. Примитивы сравниваются по значению. Объекты — по ссылке или адресу в памяти, где хранится переменная. Вот почему первый console.log возвращает false, а второй — true. Переменные «a» и «c» ссылаются на один объект, а переменные «a» и «b» — на разные объекты с одинаковыми свойствами и значениями.

#вопросы_по_javascript

Для чего нужен атрибут key при рендере списков?

Ключи (keys) помогают React определять, какие элементы были изменены, добавлены или удалены. Их необходимо указывать, чтобы React мог сопоставлять элементы массива с течением времени.

Лучший способ выбрать ключ — это использовать строку, которая будет явно отличать элемент списка от его соседей. Чаще всего вы будете использовать ID из ваших данных как ключи. Когда у вас нет заданных ID для списка, то в крайнем случае можно использовать индекс элемента как ключ.

#вопросы_по_react

Что такое замыкание и как/для чего его используют?

Если одна функция определена внутри другой, то внутренняя имеет доступ к ОВ внешней. Это называется замыканием (а также "лексической ОВ" или "статическая".
При выполнении функции используется та область видимости переменных, которая существовала на момент объявления этой функции. Это лексическая область видимости.

#вопросы_по_javascript

Объясните как использовать миксины в TypeScript

TypeScript, как и многие объектно-ориентированные языки, не позволяет использовать напрямую множественное наследование. Из-за этого, не смотря на то, что можно реализовать множество интерфейсов в классе, унаследовать его можно только от одного класса. Примесь – объект, содержащий методы и свойства для реализации конкретного функционала. Функциональность миксинов (mixins) частично позволяет унаследовать свойства и методы сразу двух и более классов, тем самым избавившись от дублирования в коде.

#вопросы_по_typescript

Что такое React Reconciliation (Cверка) и как он работает?

Reconciliation (Cверка) - это процесс, посредством которого React обновляет DOM. Когда состояние компонента изменяется, React должен рассчитать необходимость обновления DOM. Это делается путем создания виртуального DOM и сравнения его с текущим DOM. В этом контексте виртуальный DOM будет содержать новое состояние компонента.

При сравнении двух деревьев первым делом React сравнивает два корневых элемента. Поведение различается в зависимости от типов корневых элементов.

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

#вопросы_по_react

Почему 0.1 + 0.2 === 0.3 — это false?

Действительно, в JavaScript 0.1 + 0.2 на самом деле равно 0.30000000000000004. Дело в том, что все числа в языке (даже целые) представлены в формате с плавающей запятой (float). В двоичной системе счисления эти числа — бесконечные дроби. Для их хранения выделяется ограниченный объем памяти, поэтому возникают подобные неточности.

#вопросы_по_javascript

Что такое пространство имен и как его использовать?

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

Пространство имен может быть создано с помощью ключевого слова namespace, за которым следует имя пространства имен. Все интерфейсы, классы и т. Д. Можно определить в фигурных скобках {}.

#вопросы_по_typescript

Что такое порталы в React?

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

ReactDOM.createPortal(child, container)

Первый аргумент (child) — это любой React-компонент, который может быть отрендерен, такой как элемент, строка или фрагмент. Следующий аргумент (container) — это DOM-элемент.

Типовой случай применения порталов — когда в родительском компоненте заданы стили overflow: hidden или z-index, но вам нужно чтобы дочерний элемент визуально выходил за рамки своего контейнера. Например, диалоги, всплывающие карточки и всплывающие подсказки.

#вопросы_по_react

Для чего используют событие load? Есть ли у этого события недостатки? Знаете ли вы какие-либо альтернативы и в каких случаях бы стали их использовать?

Событие load происходит в конце процесса загрузки документа. На этом этапе все объекты в документе находятся в DOM, и все изображения, скрипты и ссылки загрузились.

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

#вопросы_по_javascript

Что такое декораторы и к чему их можно применить?

Декоратор - это особый вид объявления, который позволяет вам изменять классы или члены классов сразу, помечая их аннотацией name. Каждый декоратор должен ссылаться на функцию, которая будет оцениваться во время выполнения.

Например, декоратор @sealed будет соответствовать запечатанной функции. Все, что помечено @sealed, будет использоваться для оценки запечатанной функции.

Их можно прикрепить к:
- Объявлениям классов
- Методам
- Свойствам-аксессорам
- Свойствам
- Параметрам

По умолчанию декораторы не включены. Чтобы включить их, вы должны отредактировать поле experimentalDecorators в параметрах компилятора в файле tsconfig.json или в командной строке.

#вопросы_по_typescript

В чем разница между двойным двоеточием и одним двоеточием в :: before и: after? Объясните роль этих двух псевдоэлементов.

В css3 одиночное двоеточие используется для представления псевдоклассов, а двойное двоеточие используется для представления псевдоэлементов. Но для обеспечения совместимости с существующим написанием псевдоэлементов в некоторых браузерах для представления псевдоэлемента также может использоваться одно двоеточие.
Псевдоклассы обычно соответствуют некоторым особым состояниям элементов, таким как наведение, ссылка и т. Д., Тогда как псевдоэлементы обычно соответствуют особым позициям, таким как после, до и т. Д.

#вопросы_по_css

Объясните делегирование событий

Всплытие событий позволяет реализовать один из самых важных приёмов разработки - делегирование.

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

Зачем использовать:
- Упрощает инициализацию и экономит память: не нужно вешать много обработчиков.
- Меньше кода: при добавлении и удалении элементов не нужно ставить или снимать обработчики.
- Удобство изменений: можно массово добавлять или удалять элементы путём изменения innerHTML.

#вопросы_по_javascript

Атрибут alt

Всегда устанавливайте атрибут alt для тега img и не используйте в нем слова image и picture. Альтернативный текст предназначен для скринридеров, которые и так объявляют элемент как изображение, зачем повторяться?

#вопросы_по_html

Что такое Reducer? ⚡

Reducer — это чистая функция, которая вычисляет следующее состояние дерева на основании его предыдущего состояния и применяемого действия.

Редюсеры определяют, как состояние приложения изменяется в ответ на экшены, отправленные в стор. Экшены только описывают, что произошло, но не описывают, как изменяется состояние приложения.

Делаем полноценный проект в портфолио от А до Я. Бесплатно.

Немного обо мне. Меня зовут Андрей, я Senior Frontend разработчик. Веду Ютуб и несколько ТГ каналов. Обучаю Frontend разработке бесплатно всех желающих.

Недавно я провёл опрос среди подписчиков и многие поддержали мою идею. Я решил сделать большой проект, большой плейлист, в котором мы реализуем огромное количество функционала. Гарантирую, такой проект сделает из вас мидла.

Переходи в наш канал с анонсами, чтобы не пропустить: @senior_javascript

Open-Closed Principle (Принцип открытости-закрытости)

Модули, отвечающие принципу открытости-закрытости, имеют два главных признака:
- Открыты для расширения. Поведение модуля может быть расширено. Мы можем добавить модулю новое поведение в соответствии с изменившимися требованиями к приложению или для удовлетворения нужд новых приложений.
- Закрыты для изменений. Исходный код такого модуля неприкасаем. Никто не вправе вносить в него изменения.

Расскажите про тег IFRAME?

Тег IFRAME в основном используется для встраивания документов в HTML-документ. Однако последние разработки в HTML 5 лишили поддержки тега IFRAME, поэтому вам следует избегать его использования.

#вопросы_по_html