В TypeScript интерфейсы могут наследовать друг от друга, позволяя расширять или комбинировать их свойства.
Пример наследования интерфейсов:
interface Person {
name: string;
age: number;
}
interface Employee extends Person {
employeeId: string;
}
const emp: Employee = {
name: "Иван",
age: 30,
employeeId: "E123"
};
В этом примере интерфейс
Employee наследует свойства из интерфейса Person и добавляет своё свойство employeeId.Множественное наследование:
Интерфейс может наследовать несколько интерфейсов одновременно.
interface Manager extends Employee, Lead {
department: string;
}
Расширение через extends:
Ключевое слово
extends используется для наследования интерфейсов. Это позволяет создавать более сложные типы на основе базовых, повышая переиспользуемость кода и его поддерживаемость.Использование наследования интерфейсов способствует структурированности и ясности в определении типов данных в TypeScript.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9
В React
ref используется для прямого доступа к DOM-элементам. Это необходимо для управления фокусом, выделения текста или интеграции со сторонними библиотеками.Как использовать ref:
1. Импортировать хук useRef:
import React, { useRef } from 'react';
2. Создать ref:
const inputRef = useRef(null);
3. Присоединить ref к элементу:
<input ref={inputRef} type="text" />
4. Установить фокус:
inputRef.current.focus();
Пример использования:
function TextInput() {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>Фокус</button>
</div>
);
}
Преимущества использования ref:
- Прямой доступ к DOM-элементам
- Управление фокусом и текстом
- Интеграция со сторонними библиотеками
Использование
ref должно быть ограничено случаями, когда необходим прямой доступ к элементам, чтобы сохранять декларативный подход React.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥3
Медиазапросы в CSS позволяют применять стили в зависимости от характеристик устройства, например, размера экрана. Это основной инструмент для создания адаптивного дизайна, обеспечивающий корректное отображение сайта на различных устройствах.
Пример использования медиазапросов:
/* Стили по умолчанию */
.container {
width: 100%;
padding: 20px;
}
/* Медиазапрос для экранов шириной 768px и больше */
@media (min-width: 768px) {
.container {
width: 750px;
padding: 40px;
}
}
/* Медиазапрос для экранов шириной 1024px и больше */
@media (min-width: 1024px) {
.container {
width: 960px;
padding: 60px;
}
}
Основные возможности:
- Адаптация к различным устройствам: Настройка стилей для мобильных, планшетов, десктопов.
- Оптимизация производительности: Применение только необходимых стилей для конкретного устройства.
- Гибкость дизайна: Изменение макета и элементов интерфейса под разные размеры экранов.
Медиазапросы являются ключевым компонентом в современных веб-технологиях, обеспечивая удобство и доступность сайта для широкой аудитории пользователей.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10❤1🔥1
Для включения JavaScript файла в HTML-документ используется тег
<noscript>. Этот тег может быть размещен в <head> или в <body> секциях HTML-документа. Наиболее распространенный способ — это подключение скрипта перед закрывающим тегом
</body>. Это позволяет загружать и выполнять JavaScript после того, как весь HTML-контент был загружен, что улучшает производительность страницы.Пример подключения внешнего JavaScript файла:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<noscript>Document</noscript>
</head>
<body>
<h1>Hello, World!</h1>
<noscript src="noscript.js"></noscript>
</body>
</html>
Атрибут
src указывает путь к JavaScript файлу. Если файл находится в той же директории, что и HTML-документ, достаточно указать его имя.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17❤1🔥1
В JavaScript объект — это коллекция свойств, где каждое свойство состоит из ключа и значения. Объекты позволяют хранить и управлять данными в структурированном виде.
Создать объект можно несколькими способами. Один из самых распространенных — использование литерала объекта.
Пример создания объекта с помощью литерала:
const person = {
name: "John",
age: 30,
greet: function() {
console.log("Hello!");
}
};
В этом примере объект
person имеет три свойства: name, age и метод greet.Другой способ создания объекта — использование конструктора
Object:
const car = new Object();
car.make = "Toyota";
car.model = "Camry";
car.year = 2020;
Оба подхода позволяют динамически добавлять и изменять свойства объекта.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19❤1
В TypeScript интерфейсы используются для определения структуры объектов, включая функции. Интерфейсы позволяют задать типизацию для параметров и возвращаемого значения функции.
Пример использования интерфейса для типизации функции:
interface Greet {
(name: string, age: number): string;
}
const greet: Greet = (name, age) => {
return `Hello, my name is ${name} and I am ${age} years old.`;
};
В этом примере интерфейс
Greet определяет функцию, которая принимает два параметра: name типа string и age типа number, и возвращает строку. Функция greet реализует этот интерфейс, обеспечивая соответствие указанной сигнатуре.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥2
Lazy loading компонентов в React — это техника, позволяющая загружать компоненты только тогда, когда они действительно необходимы. Это помогает уменьшить размер первоначального загружаемого кода и улучшить производительность приложения.
В React для реализации lazy loading используется функция
React.lazy(), которая позволяет загружать компонент асинхронно. В сочетании с компонентом Suspense можно указать, что отображать, пока компонент загружается.Пример использования lazy loading:
import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
</div>
);
}
export default App;
В этом примере
LazyComponent загружается только при его рендеринге, а Suspense отображает сообщение "Loading..." до завершения загрузки.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🔥5
Атрибут
srcset в HTML используется для указания набора изображений с разными разрешениями или размерами, позволяя браузеру выбрать наиболее подходящее изображение в зависимости от устройства и его характеристик. Это помогает оптимизировать загрузку изображений и улучшить производительность веб-страницы.Пример использования
srcset:
<img
src="image-1x.jpg"
srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x"
alt="Example Image">
В этом примере атрибут
srcset предоставляет три версии изображения: image-1x.jpg для стандартных дисплеев, image-2x.jpg для дисплеев с удвоенной плотностью пикселей и image-3x.jpg для дисплеев с утроенной плотностью. Браузер автоматически выберет наиболее подходящее изображение в зависимости от плотности пикселей устройства.Кроме того,
srcset может использоваться с атрибутом sizes, чтобы указать, как изображение будет отображаться в различных условиях, например, при изменении ширины экрана.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🔥1
Mobile-first разработка в CSS — это подход к созданию веб-страниц, который предполагает первоначальную разработку для мобильных устройств, а затем адаптацию для более крупных экранов. Этот метод помогает обеспечить оптимальную производительность и пользовательский опыт на мобильных устройствах, которые часто имеют ограниченные ресурсы.
В mobile-first подходе стили для мобильных устройств пишутся первыми, а затем с помощью медиа-запросов добавляются стили для планшетов и десктопов.
Пример использования mobile-first подхода:
body {
font-size: 16px;
padding: 10px;
}
@media (min-width: 768px) {
body {
font-size: 18px;
padding: 20px;
}
}
@media (min-width: 1024px) {
body {
font-size: 20px;
padding: 30px;
}
}
В этом примере базовые стили применяются к мобильным устройствам, а затем с помощью медиа-запросов изменяются для более широких экранов.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14❤1
В JavaScript доступ к свойствам объекта можно получить двумя основными способами: через точечную нотацию и через квадратные скобки.
Точечная нотация используется, когда имя свойства известно и является допустимым идентификатором:
const person = {
name: "Alice",
age: 25
};
console.log(person.name); // "Alice"
console.log(person.age); // 25
Квадратные скобки позволяют использовать строки или переменные для доступа к свойствам, что особенно полезно, если имя свойства динамическое или содержит пробелы:
const property = "name";
console.log(person[property]); // "Alice"
const complexObject = {
"first name": "Bob"
};
console.log(complexObject["first name"]); // "Bob"
Оба метода позволяют как читать, так и изменять значения свойств объекта.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12❤2
В TypeScript типизация классов осуществляется с помощью определения типов для свойств и методов внутри класса. Это позволяет обеспечить строгую типизацию и выявлять ошибки на этапе компиляции.
Пример задания типов для класса:
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
greet(): string {
return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
}
}
const person = new Person("Alice", 25);
console.log(person.greet());
В этом примере класс
Person имеет два свойства: name и age, типизированные как string и number соответственно. Конструктор и метод greet также имеют типизацию для параметров и возвращаемого значения. Это обеспечивает безопасность типов и облегчает поддержку кода.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
React.memo() — это функция высшего порядка в React, используемая для оптимизации производительности функциональных компонентов. Она предотвращает ненужные повторные рендеры компонента, если его пропсы не изменились. Это особенно полезно для компонентов, которые часто получают одни и те же пропсы.Пример использования
React.memo():
import React from 'react';
const MyComponent = React.memo(({ name }) => {
console.log("Rendering MyComponent");
return <div>Hello, {name}!</div>;
});
export default MyComponent;
В этом примере
MyComponent будет рендериться только тогда, когда его пропсы изменяются. Если name остается прежним, повторный рендер не произойдет, что может значительно улучшить производительность приложения, особенно при работе с большими компонентами или сложными деревьями компонентов.React.memo() работает аналогично PureComponent для классовых компонентов, но предназначен для функциональных компонентов.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10❤1🔥1
Атрибут
content в мета-тегах HTML используется для задания значения, связанного с определенным мета-тегом. Мета-теги предоставляют метаинформацию о веб-странице, такую как описание, ключевые слова, автор и настройки отображения.Пример использования атрибута
content в мета-тегах:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="denoscription" content="This is an example of a meta denoscription.">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<noscript>Document</noscript>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
В этом примере мета-теги используют атрибут
content для задания описания страницы, ключевых слов, автора и параметров отображения. Эти данные помогают поисковым системам и браузерам лучше понимать и обрабатывать содержимое страницы.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14
useState — это один из основных хуков в React, который позволяет добавлять состояние в функциональные компоненты. Он возвращает массив из двух элементов: текущее значение состояния и функцию для его обновления.Пример использования
useState:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Current count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
В этом примере
useState(0) инициализирует состояние count со значением 0. Функция setCount используется для обновления состояния. При каждом вызове setCount, компонент перерисовывается с новым значением состояния.useState упрощает управление состоянием в функциональных компонентах, делая их более компактными и понятными по сравнению с классовыми компонентами.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12❤2🔥1
Добавление нового свойства в объект JavaScript — это простая и часто используемая операция. Существует несколько способов сделать это.
Первый способ — использование точечной нотации:
const person = {};
person.name = 'John';
Этот код добавляет свойство
name со значением 'John' в объект person.Второй способ — использование квадратных скобок:
const person = {};
person['age'] = 30;
Этот метод полезен, когда имя свойства хранится в переменной или содержит специальные символы.
Также можно использовать метод
Object.assign() для добавления нескольких свойств:
const person = {};
Object.assign(person, { height: 180, weight: 75 });
Этот метод копирует свойства из одного или нескольких объектов в целевой объект.
Каждый из этих способов позволяет гибко и эффективно управлять свойствами объектов в JavaScript.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13
Задание шрифта для всего HTML-документа — важный шаг в стилизации веб-страницы. Это можно сделать с помощью CSS, применив стиль к элементу
<body> или к селектору *, который охватывает все элементы.Пример использования селектора
body:
body {
font-family: 'Arial', sans-serif;
}
Этот код устанавливает шрифт Arial для всего содержимого страницы. Если Arial недоступен, будет использован ближайший доступный шрифт без засечек (sans-serif).
Альтернативный способ — использование универсального селектора
*:
* {
font-family: 'Arial', sans-serif;
}
Этот подход также задает шрифт для всех элементов, но может быть менее эффективным, так как затрагивает все элементы, включая те, которые могут не требовать изменения шрифта.
В обоих случаях важно убедиться, что выбранный шрифт поддерживает нужные языки и символы.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14❤1
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