Namespaces в TypeScript — это способ организации и группировки кода, чтобы избежать конфликтов имен и улучшить структуру приложения. Они позволяют объединять логически связанные компоненты, такие как классы, интерфейсы и функции, в единое пространство имен.
Пример использования namespace:
namespace Geometry {
export class Circle {
constructor(public radius: number) {}
area(): number {
return Math.PI * this.radius * this.radius;
}
}
}
const circle = new Geometry.Circle(5);
console.log(circle.area());
В этом примере класс
Circle находится в пространстве имен Geometry. Использование export делает класс доступным за пределами namespace.Namespaces полезны в крупных приложениях, но в современных проектах часто предпочитают модули ES6, которые обеспечивают более гибкую систему управления зависимостями.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
Указание фавикона на HTML-странице — это простой способ улучшить визуальное восприятие сайта в браузере. Фавикон — это небольшая иконка, отображаемая на вкладке браузера рядом с названием страницы.
Для добавления фавикона используется тег
<link> в разделе <head>:
<link rel="icon" href="/path/to/favicon.ico" type="image/x-icon">
Атрибут
href указывает путь к файлу иконки. Обычно это файл с расширением .ico, но можно использовать и другие форматы, такие как .png или .noscript.Если требуется поддержка ретина-дисплеев, можно указать несколько иконок разных размеров:
<link rel="icon" href="/path/to/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/path/to/favicon-16x16.png" sizes="16x16" type="image/png">
Эти теги обеспечивают корректное отображение фавикона на всех устройствах и платформах.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12
Единицы измерения
em и rem в CSS используются для задания относительных размеров элементов, таких как шрифты, отступы и размеры блоков. Они обеспечивают гибкость и адаптивность дизайна.em — это относительная единица, основанная на размере шрифта родительского элемента. Например, если размер шрифта родителя равен 16px, то 1em будет равен 16px. Использование em может привести к каскадному эффекту, где размеры увеличиваются или уменьшаются в зависимости от вложенности.rem — это единица, основанная на размере шрифта корневого элемента (<html>). Например, если размер шрифта корневого элемента равен 16px, то 1rem всегда будет равен 16px, независимо от вложенности.Основное отличие заключается в том, что
em зависит от родителя, а rem — от корня документа. Это делает rem более предсказуемым и удобным для создания адаптивных интерфейсов.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14
Удаление свойства из объекта в JavaScript осуществляется с помощью оператора
delete. Этот оператор позволяет удалить указанное свойство из объекта, изменяя его структуру.Пример использования оператора
delete:
const car = {
brand: 'Toyota',
model: 'Corolla',
year: 2020
};
delete car.year;
В этом примере свойство
year удаляется из объекта car. После выполнения операции объект будет содержать только свойства brand и model.Важно помнить, что
delete изменяет сам объект, и удаленное свойство больше не будет доступно. Однако delete не влияет на прототипы объекта, и не следует использовать его для удаления переменных или функций, объявленных с помощью var, let или const.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12
Настройка компилятора TypeScript осуществляется через файл
tsconfig.json, который находится в корне проекта. Этот файл определяет корневые файлы и параметры компиляции.Пример базового
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"outDir": "./dist",
"rootDir": "./src"
},
"include": ["src/**/*"],
"exclude": ["node_modules", "**/*.spec.ts"]
}
В
compilerOptions задаются параметры компиляции. Например, target определяет версию ECMAScript, в которую будет транслироваться код, а module указывает систему модулей.Параметры
include и exclude определяют, какие файлы и папки будут включены или исключены из компиляции.Настройка
tsconfig.json позволяет гибко управлять процессом компиляции и адаптировать его под нужды проекта.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
Контекст в React — это механизм, позволяющий передавать данные через дерево компонентов без необходимости явно прокидывать пропсы на каждом уровне. Это особенно полезно для глобальных данных, таких как текущий пользователь, тема или настройки локализации.
Создание контекста начинается с
React.createContext():
const ThemeContext = React.createContext('light');
Затем контекст предоставляет данные с помощью компонента
Provider:
<ThemeContext.Provider value="dark">
<App />
</ThemeContext.Provider>
Компоненты, которым нужен доступ к контексту, используют
useContext хук:
const theme = React.useContext(ThemeContext);
Контекст упрощает управление состоянием в сложных приложениях, но его следует использовать с осторожностью, чтобы избежать избыточной зависимости компонентов от глобального состояния.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
Свойство
overflow в CSS управляет отображением содержимого, выходящего за пределы контейнера. Оно определяет, как браузер должен обрабатывать избыточное содержимое.Основные значения свойства
overflow:-
visible: содержимое не обрезается и может выходить за границы элемента. Это значение по умолчанию.-
hidden: содержимое обрезается, и невидимая часть не отображается.-
scroll: содержимое обрезается, но появляется полоса прокрутки для просмотра скрытой части.-
auto: добавляет полосы прокрутки только при необходимости, если содержимое превышает размеры контейнера.Пример использования:
.container {
width: 200px;
height: 100px;
overflow: auto;
}
Свойство
overflow помогает контролировать внешний вид и поведение элементов, особенно в адаптивных интерфейсах.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15❤1🔥1
Атрибут
placeholder в HTML используется в элементах <input> и <textarea> для отображения текстовой подсказки внутри поля ввода. Эта подсказка исчезает, когда пользователь начинает вводить данные.Пример использования атрибута
placeholder:
<input type="text" placeholder="Введите ваше имя">
В этом примере текст "Введите ваше имя" будет отображаться в поле ввода до тех пор, пока пользователь не начнет вводить текст.
Атрибут
placeholder улучшает пользовательский интерфейс, предоставляя контекст и указания по заполнению формы. Однако не следует полагаться на него как на единственный способ передачи информации, так как он исчезает при вводе и может быть недоступен для пользователей с ограниченными возможностями.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14⚡1
Хуки в React — это функции, которые позволяют использовать состояние и другие возможности React в функциональных компонентах. Они упрощают управление состоянием и жизненным циклом без необходимости использовать классовые компоненты.
Основные хуки:
-
useState: позволяет добавлять состояние в функциональные компоненты. Возвращает текущее значение состояния и функцию для его обновления.
const [count, setCount] = React.useState(0);
-
useEffect: выполняет побочные эффекты в компонентах, такие как загрузка данных или подписка на события. Заменяет методы жизненного цикла componentDidMount, componentDidUpdate и componentWillUnmount.
React.useEffect(() => {
// эффект
}, []);
-
useContext: позволяет использовать контекст в функциональных компонентах, упрощая доступ к глобальным данным.
const value = React.useContext(MyContext);
-
useMemo: мемоизирует вычисленные значения, чтобы избежать ненужных повторных вычислений при рендере.
const memoizedValue = React.useMemo(() => computeExpensiveValue(a, b), [a, b]);
-
useCallback: мемоизирует функции, чтобы избежать их пересоздания при каждом рендере, что полезно при передаче функций в дочерние компоненты.
const memoizedCallback = React.useCallback(() => {
doSomething(a, b);
}, [a, b]);
-
useRef: создает изменяемый объект, который сохраняется между рендерами. Часто используется для доступа к DOM-элементам или хранения любых изменяемых значений.
const inputRef = React.useRef(null);
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🔥2
Функция обратного вызова (callback) в JavaScript — это функция, переданная в другую функцию в качестве аргумента и вызываемая после завершения операции.
Пример использования callback:
function fetchData(url, callback) {
fetch(url)
.then(response => response.json())
.then(data => callback(data))
.catch(error => console.error('Error:', error));
}
function handleData(data) {
console.log('Received data:', data);
}
fetchData('https://api.example.com/data', handleData);
В этом примере
fetchData принимает URL и функцию handleData в качестве callback. После получения данных handleData вызывается для обработки результата.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17💯1
Ambient Declarations в TypeScript используются для описания типов, которые существуют в других файлах или библиотеках, но не определены в текущем коде. Они позволяют TypeScript понимать типы, предоставляемые внешними JavaScript библиотеками, без необходимости переписывать их.
Ambient Declarations создаются с помощью ключевого слова
declare. Например, для использования глобальной переменной, определенной вне TypeScript:
declare const API_URL: string;
Для описания интерфейса библиотеки можно использовать
declare module:
declare module 'my-library' {
export function myFunction(): void;
}
Ambient Declarations часто находятся в файлах с расширением
.d.ts, которые содержат только объявления типов. Эти файлы помогают интегрировать TypeScript с существующими JavaScript проектами и библиотеками, обеспечивая статическую проверку типов и автодополнение в редакторах.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤3
Хуки в React были введены для решения нескольких ключевых проблем, связанных с управлением состоянием и логикой в компонентах. До появления хуков использовались классовые компоненты для работы с состоянием и методами жизненного цикла, что приводило к более сложному и менее читаемому коду.
Основные причины введения хуков:
- Упрощение кода: хуки позволяют использовать состояние и другие возможности React в функциональных компонентах, делая код более простым и понятным.
- Повторное использование логики: хуки упрощают повторное использование логики состояния между компонентами без необходимости использовать HOC или render props.
- Управление побочными эффектами:
useEffect заменяет методы жизненного цикла, упрощая управление побочными эффектами и улучшая читаемость кода.- Избежание дублирования: хуки помогают избежать дублирования кода, связанного с состоянием и логикой, улучшая структуру и поддержку компонентов.
Введение хуков значительно улучшило разработку на React, сделав её более гибкой и эффективной.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8❤2
Подключение CSS к HTML-документу — важный шаг для стилизации веб-страницы. Существует несколько способов сделать это:
1. Внешний файл CSS: наиболее распространенный метод, который позволяет хранить стили отдельно от HTML. Используется тег
<link> в разделе <head>:
<link rel="stylesheet" href="styles.css">
2. Встроенные стили: стили добавляются непосредственно в HTML-документ внутри тега
<style> в разделе <head>:
<style>
body {
background-color: #f0f0f0;
}
</style>
3. Inline-стили: стили применяются непосредственно к элементам через атрибут
style. Этот метод менее предпочтителен из-за плохой читаемости и поддержки:
<div style="color: red;">Hello World</div>
Использование внешнего файла CSS рекомендуется для лучшей организации и повторного использования стилей.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17🤔1💯1
Прототипное наследование в JavaScript — это механизм, позволяющий объектам наследовать свойства и методы от других объектов. В основе этого механизма лежит концепция прототипов, где каждый объект может иметь ссылку на другой объект, называемый прототипом.
Когда обращение к свойству объекта происходит, JavaScript сначала ищет это свойство в самом объекте. Если оно не найдено, поиск продолжается в прототипе объекта, и так далее, по цепочке прототипов.
Пример создания объекта с прототипным наследованием:
const animal = {
eat() {
console.log('Eating');
}
};
const dog = Object.create(animal);
dog.bark = function() {
console.log('Barking');
};
dog.eat(); // 'Eating'
dog.bark(); // 'Barking'
В этом примере объект
dog наследует метод eat от объекта animal через прототип. Прототипное наследование позволяет создавать иерархии объектов, обеспечивая гибкость и повторное использование кода.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🔥3💯1
Тег
<link> в HTML используется для установления связей между текущим документом и внешними ресурсами. Он обычно располагается в разделе <head> и не отображается на странице. Основные применения тега <link> включают:- Подключение CSS: наиболее распространенное использование — подключение внешних таблиц стилей для стилизации веб-страницы.
<link rel="stylesheet" href="styles.css">
- Фавикон: указание иконки сайта, отображаемой на вкладке браузера.
<link rel="icon" href="favicon.ico" type="image/x-icon">
- Шрифты и другие ресурсы: подключение шрифтов или других ресурсов, таких как RSS-ленты.
<link rel="alternate" type="application/rss+xml" href="feed.xml">
Тег
<link> играет важную роль в управлении внешними ресурсами, обеспечивая гибкость и модульность веб-страниц.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18🔥2💯1
"use strict" — это директива в JavaScript, которая активирует строгий режим. Строгий режим изменяет семантику JavaScript, делая его более безопасным и оптимизированным. Он помогает выявлять потенциальные ошибки и улучшает производительность кода.
Пример использования:
"use strict";
function example() {
x = 10; // Ошибка: x не определена
}
example();
В строгом режиме запрещено использование необъявленных переменных, что помогает избежать ошибок. Также он предотвращает дублирование имен параметров в функциях и запрещает использование некоторых зарезервированных слов для будущих версий JavaScript.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18❤1
Ключевое слово
abstract в TypeScript используется для определения абстрактных классов и методов. Абстрактный класс не может быть инстанцирован напрямую и служит в качестве базового класса для других классов. Он может содержать как реализованные методы, так и абстрактные методы, которые должны быть реализованы в производных классах.Пример абстрактного класса:
abstract class Animal {
abstract makeSound(): void; // Абстрактный метод без реализации
move(): void {
console.log("Moving...");
}
}
class Dog extends Animal {
makeSound(): void {
console.log("Bark");
}
}
const dog = new Dog();
dog.makeSound(); // Выводит "Bark"
dog.move(); // Выводит "Moving..."
Абстрактные классы помогают создавать шаблоны для других классов, обеспечивая обязательную реализацию определенных методов в производных классах. Это способствует более строгой архитектуре и лучшей организации кода.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10⚡1
Элемент
<nav> в HTML используется для определения навигационных ссылок на веб-странице. Он служит контейнером для основных навигационных блоков, таких как меню, списки ссылок и другие элементы, которые помогают пользователям перемещаться по сайту.Пример использования:
<nav>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
Элемент
<nav> улучшает семантику HTML-документа, делая его более понятным для поисковых систем и вспомогательных технологий. Он не должен использоваться для всех ссылок на странице, а только для тех, которые составляют основную навигацию. Это помогает улучшить доступность и SEO, подчеркивая важные навигационные области.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18💯1👨💻1
CSS-переменные, также известные как пользовательские свойства, позволяют хранить значения, которые можно использовать повторно в CSS-коде. Они упрощают управление стилями и делают код более гибким и читаемым.
Определение CSS-переменной:
:root {
--main-color: #3498db; // Определение переменной
--padding: 10px;
}
Использование CSS-переменной:
.button {
background-color: var(--main-color); // Применение переменной
padding: var(--padding);
}
Переменные определяются с помощью префикса
-- и доступны в пределах их области видимости. Обычно они объявляются в :root, чтобы быть доступными глобально. Для использования переменной применяется функция var(). CSS-переменные позволяют легко изменять темы и поддерживать консистентность стилей.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12✍2
Работа с типами TypeScript, определенными в сторонних библиотеках, упрощает интеграцию и использование этих библиотек в проектах. Обычно такие типы предоставляются в виде файлов деклараций
.d.ts, которые содержат описание типов и интерфейсов.1. Установка типов: многие популярные библиотеки имеют отдельные пакеты с типами, которые можно установить через npm. Например, для библиотеки
lodash:
npm install @types/lodash
2. Импорт типов: после установки типов можно использовать их в коде, импортируя необходимые функции или классы:
import _ from 'lodash';
const result: number = _.add(5, 10);
3. Проверка типов: TypeScript автоматически использует файлы деклараций для проверки типов и автодополнения в редакторах, что упрощает разработку и снижает вероятность ошибок.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥2
Метод
forEach в JavaScript используется для перебора элементов массива. Он выполняет указанную функцию один раз для каждого элемента массива, в порядке их появления. Это метод массива, который не возвращает новый массив, а просто выполняет функцию для каждого элемента.Синтаксис:
array.forEach(function(element, index, array) {
// Действия с элементом
});
Первый параметр — это текущий элемент массива, второй — индекс элемента, третий — сам массив. Индекс и массив являются необязательными параметрами.
Пример использования:
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
console.log(number * 2); // Умножает каждый элемент на 2 и выводит результат
});
Этот метод удобен для выполнения операций, которые не требуют изменения исходного массива или его фильтрации.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17❤2🔥1