Теневой DOM (Shadow DOM) — это технология в веб-разработке, которая позволяет создавать инкапсулированные и изолированные DOM-деревья внутри веб-компонентов. Он скрывает внутреннюю структуру компонента от остальной части документа, предотвращая воздействие внешних стилей и скриптов на внутренние элементы компонента.
Теневой DOM позволяет:
- Инкапсулировать стили и разметку: Стили внутри теневого DOM не влияют на внешний документ и не затрагиваются внешними стилями.
- Избежать конфликтов стилей: Уникальность стилей внутри компонента предотвращает непредвиденные изменения из-за глобальных стилей.
Создание теневого корня:
// Получение хост-элемента
const host = document.getElementById('my-component');
// Создание теневого корня
const shadowRoot = host.attachShadow({ mode: 'open' });
// Добавление контента в теневой DOM
shadowRoot.innerHTML = `
<style>
/* Стили применяются только внутри теневого DOM */
p {
color: blue;
}
</style>
<p>Текст внутри теневого DOM</p>
`;
Пояснение:
- attachShadow: Метод, который создаёт теневой корень для хост-элемента.
- mode: 'open': Позволяет доступ к теневому DOM через свойство
element.shadowRoot. В режиме 'closed' доступ ограничен.Таким образом, теневой DOM предоставляет механизм для создания компонентов с собственными стилями и разметкой, обеспечивая модульность и переиспользуемость кода без риска стилистических конфликтов с остальной частью приложения.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9
Чтобы указать кодировку символов в HTML-документе, используется мета-тег
<meta> с атрибутом charset внутри элемента <head>. Это необходимо для правильного отображения символов на странице.Пример использования UTF-8 кодировки:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<noscript>Пример документа</noscript>
</head>
<body>
<p>Привет, мир!</p>
</body>
</html>
В этом примере атрибут
charset="UTF-8" сообщает браузеру использовать кодировку UTF-8 для интерпретации символов.Особенности:
- Расположение мета-тега: Метатег с кодировкой должен быть указан в начале секции
<head>, желательно перед любыми другими мета-тегами и ссылками на стили или скрипты.- Важность указания кодировки: Если кодировка не указана или указана неверно, браузер может неправильно отображать символы, особенно если документ содержит специальные или национальные символы.
Альтернативный вариант для HTML5:
<meta charset="UTF-8">
Для более старых версий HTML:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Однако в современных документах рекомендуется использовать первый вариант с атрибутом
charset.Указание правильной кодировки обеспечивает корректное отображение текстового контента и предотвращает проблемы с нечитаемыми символами на странице.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
Ключевое слово
readonly в TypeScript используется для определения свойств объектов, которые нельзя изменить после их первоначальной установки. Это повышает безопасность кода, предотвращая непреднамеренные изменения данных.Применение с интерфейсами:
interface User {
readonly id: number;
name: string;
}
const user: User = { id: 1, name: "Alice" };
// Попытка изменить readonly-свойство вызовет ошибку
user.id = 2; // Ошибка: нельзя присвоить значение свойству "id", так как оно только для чтения
Использование с классами:
class Point {
readonly x: number;
readonly y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
}
const point = new Point(10, 20);
// Попытка переопределить свойства
point.x = 15; // Ошибка: свойство "x" только для чтения
Для массивов:
const arr: ReadonlyArray<number> = [1, 2, 3];
// Методы, изменяющие массив, недоступны
arr.push(4); // Ошибка: метод "push" не существует на типе readonly массив
readonly обеспечивает неизменность данных после их инициализации, что помогает предотвращать ошибки и делает код более предсказуемым.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
Цикл
while в JavaScript выполняет блок кода, пока условие остаётся истинным. Сначала проверяется условие, и если оно истинно, выполняется тело цикла. Это повторяется до тех пор, пока условие не станет ложным.Синтаксис цикла while:
while (condition) {
// Код, который выполняется, пока условие истинно
}
Пример использования цикла while:
let i = 0;
while (i < 5) {
// Вывод значения i
console.log(i);
// Увеличение i на 1
i++;
}
В этом примере цикл будет выполняться, пока значение переменной
i меньше 5. На каждой итерации выводится текущее значение i, после чего i увеличивается на 1.Важно следить за тем, чтобы условие цикла в конечном итоге стало ложным, иначе цикл станет бесконечным.
Пример бесконечного цикла:
while (true) {
// Этот код будет выполняться бесконечно
}
Бесконечные циклы могут привести к зависанию программы, поэтому необходимо всегда обеспечивать условия для выхода из цикла.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10
Float-элементы в CSS используются для создания обтекания и управления расположением элементов по горизонтали. Свойство
float определяет, что элемент будет выровнен по левому (left) или правому (right) краю, а последующие элементы будут обтекать его.Пример использования:
/* Элемент, который будет плавающим */
.float-left {
float: left;
width: 200px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
HTML-разметка:
<div class="float-left"></div>
<p>Текст обтекает плавающий элемент. Он располагается рядом и вокруг блока с классом "float-left".</p>
Особенности работы float:
- Плавающие элементы вынимаются из обычного потока документа.
- Элементы после плавающего обтекают его, занимая оставшееся пространство.
- Родительский контейнер может "схлопнуться", если внутри него только плавающие элементы. Для решения этой проблемы используют "очистку" (clear) или псевдоэлемент "clearfix".
Пример clearfix:
/* Очистка обтекания */
.container::after {
content: "";
display: table;
clear: both;
}
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
Компонент высшего порядка (Higher-Order Component, HOC) в React — это функция, которая принимает компонент и возвращает новый компонент. HOC позволяет переиспользовать логику между компонентами, не изменяя их исходный код. Это аналог паттерна проектирования "Декоратор" в объектно-ориентированном программировании.
Основная идея:
HOC оборачивает исходный компонент, добавляя ему новые свойства или поведение. Это позволяет абстрагировать общую логику и использовать её в разных компонентах.
Пример создания HOC:
// Функция высшего порядка, принимающая компонент
function withLogging(WrappedComponent) {
return class extends React.Component {
componentDidMount() {
console.log('Компонент был смонтирован');
}
render() {
// Передача пропсов во вложенный компонент
return <WrappedComponent {...this.props} />;
}
};
}
В этом примере функция
withLogging принимает компонент WrappedComponent и возвращает новый компонент, который логирует сообщение при монтировании и рендерит исходный компонент с переданными пропсами.Использование HOC:
// Исходный компонент
class MyComponent extends React.Component {
render() {
return <div>Привет, {this.props.name}!</div>;
}
}
// Оборачиваем компонент в HOC
const MyComponentWithLogging = withLogging(MyComponent);
// Используем новый компонент
ReactDOM.render(
<MyComponentWithLogging name="Алиса" />,
document.getElementById('root')
);
Преимущества использования HOC:
- Переиспользование логики: Общая функциональность может быть вынесена в HOC и применена к разным компонентам.
- Разделение ответственности: Компоненты остаются чистыми и отвечают только за отображение, в то время как HOC добавляет дополнительное поведение.
- Абстрагирование кода: Сокращает дублирование кода и упрощает поддержку.
Важно учитывать:
- HOC не изменяет и не наследует поведение исходного компонента; вместо этого он оборачивает его.
- Обёрнутый компонент не должен изменять контракт исходного компонента.
- Следует осторожно обращаться с статическими методами и рефами, так как они могут быть недоступны в обёрнутом компоненте без дополнительной обработки.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
Для создания checkbox и radio button используются элементы
<input> с соответствующими типами.Пример создания checkbox:
<!-- Создание checkbox с меткой -->
<label>
<input type="checkbox" name="agree" />
Согласен с условиями
</label>
В этом примере используется элемент
<label> для увеличения области клика и связывания текста с полем ввода.Пример создания radio button:
<!-- Создание группы radio buttons -->
<label>
<input type="radio" name="gender" value="male" />
Мужчина
</label>
<label>
<input type="radio" name="gender" value="female" />
Женщина
</label>
Важно, чтобы все radio buttons в группе имели одинаковое значение атрибута
name, чтобы они функционировали как взаимно исключающие варианты.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10
static
По умолчанию все элементы имеют позиционирование
static. Элементы располагаются в обычном потоке документа без возможности изменения их положения с помощью свойств top, left, bottom, right.relative
Относительное позиционирование позволяет сдвигать элемент относительно его нормального положения.
/* Смещение элемента на 20px вправо и вниз */
.element {
position: relative;
top: 20px;
left: 20px;
}
absolute
Абсолютное позиционирование выводит элемент из обычного потока и позиционирует его относительно ближайшего предка с позиционированием, отличным от
static.
/* Родительский элемент */
.container {
position: relative; /* Задает точку отсчета для дочерних элементов */
}
/* Абсолютно позиционированный элемент */
.element {
position: absolute;
top: 0;
left: 0;
}
fixed
Фиксированное позиционирование привязывает элемент к определенной позиции в окне браузера, независимо от прокрутки страницы.
/* Фиксированный элемент в нижнем правом углу */
.element {
position: fixed;
bottom: 10px;
right: 10px;
}
Итог
-
static: стандартное позиционирование без изменений.-
relative: смещение относительно собственного места в документе.-
absolute: позиционирование относительно предка или окна, исключает из потока.-
fixed: фиксируется относительно окна браузера, не двигается при прокрутке.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18❤1🤩1
В TypeScript массивы можно типизировать для обеспечения строгой типизации и предотвращения ошибок. Существует несколько способов типизации массивов.
Использование нотации Type[]
// Массив строк
const names: string[] = ["Alice", "Bob", "Charlie"];
// Массив чисел
const numbers: number[] = [1, 2, 3, 4];
Использование обобщенного типа Array<Type>
// Массив булевых значений
const flags: Array<boolean> = [true, false, true];
// Массив объектов
const users: Array<{ id: number; name: string }> = [
{ id: 1, name: "Alice" },
{ id: 2, name: "Bob" },
];
Кортежи для фиксированных типов и длины
// Кортеж из строки и числа
const person: [string, number] = ["Alice", 30];
Многомерные массивы
// Двумерный массив чисел
const matrix: number[][] = [
[1, 2],
[3, 4],
];
Массивы с несколькими типами
// Массив строк и чисел
const mixed: (string | number)[] = ["Alice", 42];
Использование типов или интерфейсов
// Определение интерфейса
interface User {
id: number;
name: string;
}
// Массив объектов типа User
const userList: User[] = [
{ id: 1, name: "Alice" },
{ id: 2, name: "Bob" },
];
Обобщенные функции с массивами
// Обобщенная функция для вывода элементов массива
function logItems<T>(items: T[]): void {
items.forEach((item) => console.log(item));
}
Таким образом, типизация массивов в TypeScript обеспечивает гибкость и безопасность кода, позволяя точно определять структуры данных.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10
Цикл
do...while в JavaScript выполняет блок кода хотя бы один раз, а затем повторяет выполнение, пока указанное условие истинно. В отличие от цикла while, который сначала проверяет условие, do...while гарантирует выполнение тела цикла минимум один раз независимо от условия.Пример использования:
let count = 0;
do {
console.log("Текущее значение:", count); // Выводит значение счетчика
count++;
} while (count < 5);
В этом примере цикл
do...while выполняет тело цикла, увеличивая значение count и выводя его, пока count меньше 5. Даже если начальное значение count было бы больше или равно 5, блок кода внутри do всё равно выполнится один раз.Когда использовать do...while:
- Когда необходимо гарантировать хотя бы одно выполнение блока кода перед проверкой условия.
- В случаях, когда условие для повторения цикла зависит от выполнения действий внутри цикла.
Циклы
do...while полезны в ситуациях, где необходимо выполнить операцию минимум один раз, например, при запросе ввода от пользователя до тех пор, пока не будет введено корректное значение.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
Frontend собеседования pinned «Подписывайся на наши новые каналы! 👩💻 Git 🖥 SQL 👩💻 QA»
Теги
<strong> и <b> в HTML используются для выделения текста, но имеют разные смысловые нагрузки и предназначения.<strong>
Тег
<strong> представляет собой семантический элемент, который указывает на важность или срочность содержимого. Он помогает поисковым системам и вспомогательным технологиям понимать структуру и значение текста.Пример использования:
<p>Обязательно прочитайте <strong>важные инструкции</strong> перед началом работы.</p>
<b>
Тег
<b> является чисто презентационным и используется для выделения текста без передачи какой-либо дополнительной смысловой информации. Он не несет семантической нагрузки и служит только для визуального акцента.Пример использования:
<p>Это предложение содержит слово <b>жирным</b> шрифтом.</p>
Основные различия:
1. Семантика:
-
<strong> несет смысловую нагрузку, указывая на важность текста.-
<b> служит только для визуального выделения без дополнительного смысла.2. Доступность:
- Скринридеры могут по-разному интерпретировать
<strong>, подчеркивая важность прочтения.-
<b> не передает дополнительной информации скринридерам.3. SEO:
- Поисковые системы могут учитывать
<strong> при ранжировании контента из-за его семантической важности.-
<b> не влияет на SEO, так как не несет смысловой информации.Когда использовать:
- Использовать
<strong>, когда требуется подчеркнуть важность или срочность текста.- Использовать
<b>, когда необходимо просто выделить текст визуально без передачи дополнительного смысла, например, для стилизации.Выбор между
<strong> и <b> зависит от контекста и цели выделения текста. Для улучшения семантики и доступности веб-страниц предпочтительно использовать <strong>, тогда как <b> подходит для чисто визуального выделения.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥1
Свойство
children в React представляет собой специальный пропс, который позволяет передавать вложенные элементы внутрь компонента. Это обеспечивает гибкость и повторное использование компонентов, позволяя им оборачивать или содержать другие элементы без необходимости явно определять каждую вложенную часть.Использование children:
// Определение компонента-обертки
function Container({ children }) {
return (
<div className="container">
{children /* Отображение вложенных элементов */}
</div>
);
}
// Использование компонента с вложенными элементами
function App() {
return (
<Container>
<h1>Заголовок приложения</h1>
<p>Некоторый текст внутри контейнера.</p>
</Container>
);
}
В этом примере компонент
Container принимает любые вложенные элементы, переданные между его открывающим и закрывающим тегами, и отображает их внутри div с классом container.Ключевые аспекты children:
1. Гибкость:
children позволяет компонентам быть максимально универсальными, принимая любое содержимое без привязки к конкретной структуре.2. Композиция компонентов: С помощью
children можно создавать сложные компоненты из более простых, комбинируя их функциональность.3. Типы данных: Свойство
children может содержать строки, числа, элементы React, массивы элементов и другие типы данных.Практические сценарии использования:
- Создание Layout-компонентов: Например, компоненты
Header, Footer и основной контент могут быть организованы с помощью children в общем компоненте Layout.- Higher-Order Components (HOC): Компоненты высшего порядка часто используют
children для оборачивания других компонентов и добавления дополнительной функциональности.- Модальные окна и диалоги: Компоненты, которые отображают содержимое поверх основного интерфейса, используют
children для отображения динамического контента.Свойство
children является фундаментальной концепцией в React, позволяющей создавать гибкие и переиспользуемые компоненты.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
Свойство
z-index в CSS управляет порядком наложения элементов на странице. Оно определяет, какие элементы будут отображаться поверх других, основываясь на их значении z-index. Чем выше значение, тем выше элемент располагается по оси Z.Основные принципы работы z-index:
1. Позиционирование:
z-index работает только с элементами, у которых задано свойство position со значением relative, absolute, fixed или sticky. Без позиционирования z-index не применяется.2. Контекст наложения: Каждый позиционированный элемент создает новый контекст наложения. Внутри этого контекста
z-index элементов сравнивается между собой, но не с элементами из других контекстов.3. Значения: Значения
z-index могут быть как положительными, так и отрицательными числами. По умолчанию элементы имеют z-index: auto, что означает, что они располагаются в порядке появления в HTML.Пример использования:
<style>
.box1 {
position: absolute; /* Устанавливает позиционирование */
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
z-index: 1; /* Нижний слой */
}
.box2 {
position: absolute;
top: 80px;
left: 80px;
width: 100px;
height: 100px;
background-color: blue;
z-index: 2; /* Верхний слой */
}
</style>
<div class="box1"></div>
<div class="box2"></div>
В этом примере синий блок с
z-index: 2 будет отображаться поверх красного блока с z-index: 1, несмотря на то, что красный блок объявлен первым в HTML.Советы по использованию z-index:
- Избегать чрезмерного использования высоких значений
z-index, чтобы не создавать сложных и запутанных контекстов наложения.- Управлять
z-index внутри отдельных контекстов наложения для лучшей организованности слоев.- Проверять позиционирование элементов, если
z-index не влияет на отображение, так как без заданного position свойство не работает.Понимание работы
z-index помогает управлять расположением элементов на странице и создавать интерфейсы без визуальных конфликтов.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10❤1🔥1
Union-типы в TypeScript позволяют переменной принимать значения нескольких различных типов. Это повышает гибкость кода, обеспечивая строгую типизацию без потери универсальности.
Синтаксис:
let value: string | number;
Пример использования:
function display(value: string | number) {
if (typeof value === "string") {
console.log("Строка:", value.toUpperCase()); // Преобразование строки в верхний регистр
} else {
console.log("Число:", value.toFixed(2)); // Форматирование числа с двумя десятичными знаками
}
}
display("hello");
display(123.456);
В этом примере функция
display принимает параметр value, который может быть строкой или числом. Внутри функции с помощью проверки typeof определяется тип значения и выполняются соответствующие действия.Преимущества использования union-типов:
1. Гибкость: Позволяют функциям и переменным работать с несколькими типами данных без потери безопасности типов.
2. Упрощение кода: Снижают необходимость создавать дополнительные типы или интерфейсы для различных вариантов данных.
3. Безопасность: TypeScript обеспечивает проверку типов на этапе компиляции, предотвращая возможные ошибки.
Когда использовать union-типы:
- Когда функция или компонент может принимать различные типы данных.
- При работе с внешними данными, где тип может быть неоднозначным.
- Для создания универсальных и переиспользуемых компонентов в приложениях.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Теги
<em> и <i> в HTML используются для выделения текста, но имеют различные семантические значения.<em>
Тег
<em> обозначает подчёркивание с целью акцента или выделения важности текста. Он несёт семантическую нагрузку, что помогает поисковым системам и вспомогательным технологиям понимать структуру и смысл содержимого.Пример использования:
<p>Этот абзац содержит <em>важное</em> слово.</p>
<i>
Тег
<i> служит для стилистического выделения текста без передачи дополнительной смысловой информации. Он используется для обозначения терминов, названий, мыслей персонажей и других элементов, требующих визуального акцента.Пример использования:
<p>Слово <i>italic</i> пишется курсивом.</p>
Основные различия:
1. Семантика:
-
<em> подчёркивает важность или акцент текста.-
<i> применяется для стилистического выделения без дополнительного смысла.2. Доступность:
- Скринридеры могут акцентировать слова внутри
<em>, передавая их важность.-
<i> не несёт дополнительной информации для вспомогательных технологий.Когда использовать:
- Применять
<em>, когда необходимо подчеркнуть значимость или акцентировать внимание на тексте.- Использовать
<i> для визуального выделения терминов, названий или других элементов без смысловой нагрузки.Выбор между
<em> и <i> зависит от цели выделения текста. Для улучшения семантики и доступности рекомендуется использовать <em> при необходимости акцента, а <i> – для чисто визуального оформления.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9
Массивы в JavaScript представляют собой структуры данных, позволяющие хранить упорядоченные коллекции элементов. Они гибкие и поддерживают различные методы для эффективной работы с данными.
Создание массивов:
1. Литерал массива:
const fruits = ['Apple', 'Banana', 'Cherry']; // Массив строк
2. С помощью конструктора Array:
const numbers = new Array(1, 2, 3, 4); // Массив чисел
3. Заполнение массива фиксированной длины:
const emptyArray = new Array(5); // Массив из 5 неопределенных элементов
Основные методы работы с массивами:
-
push добавляет элемент в конец массива.-
pop удаляет последний элемент.-
shift удаляет первый элемент.-
unshift добавляет элемент в начало массива.-
forEach выполняет функцию для каждого элемента.-
map создает новый массив с результатами выполнения функции для каждого элемента.-
filter создает новый массив с элементами, прошедшими проверку.Пример использования методов:
const numbers = [1, 2, 3, 4, 5];
// Добавление элемента
numbers.push(6); // [1, 2, 3, 4, 5, 6]
// Удаление последнего элемента
const last = numbers.pop(); // last = 6, массив: [1, 2, 3, 4, 5]
// Итерация по элементам
numbers.forEach(num => console.log(num)); // Выводит числа 1, 2, 3, 4, 5
Массивы являются фундаментальной частью JavaScript и широко используются для хранения и управления списками данных, выполнения итераций и реализации различных алгоритмов.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10❤1
Flexbox — современный CSS-модуль, предназначенный для создания гибких и адаптивных макетов. Он упрощает выравнивание и распределение пространства между элементами контейнера, даже при их изменяющихся размерах.
Основные свойства контейнера (display: flex):
- flex-direction: определяет направление главной оси. Возможные значения:
-
row — по горизонтали (по умолчанию),-
column — по вертикали,-
row-reverse и column-reverse — в обратном порядке.- justify-content: управляет выравниванием элементов вдоль главной оси. Значения:
-
flex-start,-
flex-end,-
center,-
space-between,-
space-around,-
space-evenly.- align-items: выравнивание по поперечной оси. Значения:
-
stretch (по умолчанию),-
flex-start,-
flex-end,-
center,-
baseline.- flex-wrap: задает перенос элементов на новую строку. Значения:
-
nowrap (по умолчанию),-
wrap,-
wrap-reverse.Свойства элементов:
- flex-grow: определяет способность элемента расширяться.
- flex-shrink: способность элемента сжиматься.
- flex-basis: начальная основа для размера элемента.
Пример использования Flexbox:
.container {
display: flex;
flex-direction: row; /* направление элементов */
justify-content: space-between; /* распределение пространства */
align-items: center; /* выравнивание по центру */
}
.item {
flex-grow: 1; /* элемент может расти */
}
Flexbox значительно облегчает создание сложных интерфейсов, обеспечивая гибкость и адаптивность дизайна.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12
Приведение типов в TypeScript позволяет явно указывать тип значения, обеспечивая безопасность и предсказуемость кода. Это особенно полезно при работе с данными типа
any или при взаимодействии с DOM.Существует два основных способа приведения типов:
1. Использование угловых скобок:
const someValue: any = "Hello TypeScript";
const strLength: number = (<string>someValue).length; // получаем длину строки
2. Использование ключевого слова as:
const someValue: any = "Hello TypeScript";
const strLength: number = (someValue as string).length; // получаем длину строки
Метод с
as предпочтителен при работе с JSX, например, в React. Важно применять приведение типов осознанно, чтобы не нарушить безопасность типов, предоставляемую TypeScript.Пример работы с DOM элементом:
const inputElement = document.getElementById('username') as HTMLInputElement;
console.log(inputElement.value); // доступ к свойству value
В этом примере элемент с id
username приводится к типу HTMLInputElement, что позволяет безопасно обращаться к его свойствам. Приведение типов помогает избежать ошибок компиляции и улучшить автодополнение в редакторах кода, делая разработку более эффективной и надежной.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1