Frontend | Вопросы собесов

Какие плюсы есть у ts ? Спросят с вероятностью 7% TypeScript (TS) — это надстройка над JavaScript, добавляющая статическую типизацию и другие возможности. Он предоставляет множество преимуществ, которые делают его привлекательным для разработки крупных и сложных приложений. Вот основные плюсы TypeScript: 1️⃣Статическая типизация Позволяет явно указывать типы переменных, функций и объектов, что помогает выявлять ошибки на этапе компиляции, а не во время выполнения. Это делает код более надежным и уменьшает количество багов.

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

// Ошибка на этапе компиляции, если передать нечисловые значения
// add('1', '2');

2️⃣Улучшенная поддержка инструментов и автодополнение Статическая типизация и декларации типов позволяют редакторам кода (например, Visual Studio Code) предоставлять улучшенное автодополнение, подсказки и рефакторинг.

interface User {
  id: number;
  name: string;
}

const user: User = {
  id: 1,
  name: 'Alice'
};

// Автодополнение будет предлагать поля 'id' и 'name' для объекта 'user'

3️⃣Рефакторинг и поддержка кода Благодаря типизации и строгим правилам, TypeScript упрощает рефакторинг кода. Вы можете безопасно переименовывать переменные, функции и классы, уверенные в том, что все использования будут обновлены. 4️⃣Совместимость с JavaScript Является надстройкой над JavaScript, поэтому любой корректный JavaScript-код также является корректным TypeScript-кодом. Это позволяет постепенно внедрять TypeScript в существующие проекты.

// Это корректный TypeScript-код, так как он также является корректным JavaScript-кодом
const message = "Hello, TypeScript!";
console.log(message);

5️⃣Расширенные возможности OOP Добавляет возможности объектно-ориентированного программирования (ООП) к JavaScript, такие как классы, интерфейсы, абстрактные классы и модификаторы доступа (public, private, protected).

class Animal {
  private name: string;

  constructor(name: string) {
    this.name = name;
  }

  public speak(): void {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name);
  }

  public speak(): void {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex');
dog.speak(); // Rex barks.

6️⃣Система модулей Поддерживает современные стандарты модулей (ES6 и CommonJS), что упрощает организацию и управление зависимостями в проекте.

// module.ts
export function greet(name: string): string {
  return `Hello, ${name}`;
}

// main.ts
import { greet } from './module';

console.log(greet('TypeScript'));

7️⃣Поддержка современных возможностей JavaScript TypeScript поддерживает последние версии JavaScript и позволяет использовать новые возможности языка даже в старых браузерах благодаря транспиляции. 8️⃣Сообщество и экосистема Имеет большое и активное сообщество, множество библиотек и инструментов. Это делает его надежным выбором для долгосрочных проектов. TypeScript добавляет статическую типизацию, улучшает автодополнение и рефакторинг, предоставляет возможности ООП, поддерживает современные стандарты модулей и совместим с JavaScript. Это делает код более надежным, удобным в поддержке и разработке. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Техническая поддержка сайтов на 1С-Битрикс Мы станем лучшими друзьями вашему сайту на 1С-Битрикс. Делаем: - устранение ошибок и неполадок сайта; - улучшение производительности и оптимизация работы сайта; - доработка функционала и добавление новых возможностей; - установка обновлений и патчей безопасности; - резервное копирование и восстановление данных. Время реакции от 3х минут! Перейти на сайт #реклама esdi.ru О рекламодателе

Что такое call, apply и bind ? Спросят с вероятностью 7% call, apply и bind — это методы, которые позволяют управлять контекстом (this) функции. Они полезны для вызова функции с определённым значением this и передачи аргументов. Вот как они работают: 1️⃣call Вызывает функцию с указанным значением this и аргументами, переданными по отдельности. Синтаксис:

func.call(thisArg, arg1, arg2, ...);

Пример:

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

const user = { name: 'Alice' };

greet.call(user, 'Hello', '!'); // Hello, Alice!

2️⃣apply Похож на call, но аргументы передаются в виде массива. Синтаксис:

func.apply(thisArg, [arg1, arg2, ...]);

Пример:

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

const user = { name: 'Alice' };

greet.apply(user, ['Hello', '!']); // Hello, Alice!

3️⃣bind Создаёт новую функцию, которая при вызове будет иметь указанный контекст this и аргументы, переданные при создании. Он не вызывает функцию сразу, а возвращает новую функцию. Синтаксис:

const boundFunction = func.bind(thisArg, arg1, arg2, ...);

Пример:

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

const user = { name: 'Alice' };

const boundGreet = greet.bind(user, 'Hello');
boundGreet('!'); // Hello, Alice!

Сравнение методов 1️⃣`call` и `apply`: ✅Используются для немедленного вызова функции с заданным this. ✅call принимает аргументы по отдельности. ✅apply принимает аргументы в виде массива. 7️⃣`bind`: ✅Возвращает новую функцию с заданным this, которую можно вызвать позже. ✅Полезен для создания функции с постоянным контекстом. Краткий ответ: ✅`call` вызывает функцию с указанным значением this и аргументами, переданными по отдельности. ✅`apply` вызывает функцию с указанным значением this и аргументами, переданными в виде массива. ✅`bind` создаёт новую функцию с указанным значением this и аргументами, которую можно вызвать позже. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Приглашаем специалистов по продажам Ищем менеджеров-консультантов в торговый зал. Средний ежемесячный доход 100 000 рублей. Работа в СТД «Петрович» – это официальное трудоустройство, своевременная выплата заработной платы! Присоединяйся к команде и открывай новые горизонты в своей карьере! Узнать больше #реклама petrovichjob.ru О рекламодателе

Методичка: как сделать онлайн-встречи эффективнее Надоело ждать коллег, которые постоянно забывают о встречах, а отсутствие повестки и потерянные договоренности мешают нормально работать? Команда МТС Линк собрала на 37 страницах полезные материалы, чек-листы и кейсы, которые помогают компаниям проводить эффективные совещания в онлайне с помощью сервиса Встречи. Из методички узнаете: - Как создать постоянную ссылку и подключаться на встречи в 2 клика, - Как делать заметки и работать с файлами, не переживая за качество связи и безопасность данных. - Как облегчает жизнь ИИ, который расшифровывает созвоны в текст и автоматически отправляет расшифровку на почту. Еще в методичке описаны 7 способов оценки текущей эффективности ваших онлайн-встреч. Получить гайд можно бесплатно на сайте. Скачать #реклама mts-link.ru О рекламодателе

Что известно про утилити типы ? Спросят с вероятностью 7% Утилити типы (utility types) — это встроенные типы, которые помогают манипулировать другими типами и упрощают работу с ними. Они позволяют изменять, расширять, ограничивать и комбинировать типы, что делает код более гибким и безопасным. Вот некоторые из наиболее часто используемых утилити и их примеры: 1️⃣Partial Делает все свойства типа T необязательными.

interface User {
  id: number;
  name: string;
  email: string;
}

const updateUser = (id: number, userUpdates: Partial<User>) => {
  // Обновление пользователя
};

updateUser(1, { name: 'Alice' }); // Можно передать только часть свойств

2️⃣Required Делает все свойства типа T обязательными.

interface User {
  id?: number;
  name?: string;
  email?: string;
}

const user: Required<User> = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com'
}; // Все свойства должны быть указаны

3️⃣Readonly Делает все свойства типа T только для чтения.

interface User {
  id: number;
  name: string;
  email: string;
}

const user: Readonly<User> = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com'
};

user.id = 2; // Ошибка: свойство id доступно только для чтения

4️⃣Pick Создает тип с набором свойств K из типа T.

interface User {
  id: number;
  name: string;
  email: string;
}

const user: Pick<User, 'id' | 'name'> = {
  id: 1,
  name: 'Alice'
}; // Только свойства id и name

5️⃣Omit Создает тип, исключающий свойства K из типа T.

interface User {
  id: number;
  name: string;
  email: string;
}

const user: Omit<User, 'email'> = {
  id: 1,
  name: 'Alice'
}; // Все свойства, кроме email

6️⃣Record Создает тип объекта, ключи которого из K, а значения типа T.

type Roles = 'admin' | 'user' | 'guest';

const roles: Record<Roles, string> = {
  admin: 'Admin User',
  user: 'Regular User',
  guest: 'Guest User'
};

7️⃣Exclude Создает тип, исключая из T те типы, которые находятся в U.

type T = 'a' | 'b' | 'c';
type U = 'a';

type Result = Exclude<T, U>; // 'b' | 'c'

8️⃣Extract Создает тип, включающий только те типы из T, которые также находятся в U.

type T = 'a' | 'b' | 'c';
type U = 'a' | 'c';

type Result = Extract<T, U>; // 'a' | 'c'

9️⃣NonNullable Исключает null и undefined из типа T.

type T = string | number | null | undefined;

type NonNullableT = NonNullable<T>; // string | number

🔟ReturnType Получает тип возвращаемого значения функции T.

function getUser() {
  return { id: 1, name: 'Alice' };
}

type User = ReturnType<typeof getUser>; // { id: number, name: string }

Утилити типы помогают манипулировать типами, делая их более гибкими и безопасными. Они позволяют изменять, расширять, ограничивать и комбинировать типы. Вот основные утилити типы и их примеры: Основные утилити 1️⃣Partial: Делает все свойства типа необязательными.

      interface User {
     id: number;
     name: string;
     email: string;
   }

   const updateUser = (id: number, userUpdates: Partial<User>) => {
     // Обновление пользователя
   };

   updateUser(1, { name: 'Alice' }); // Можно передать только часть свойств
   

2️⃣Required: Делает все свойства типа обязательными.

      interface User {
     id?: number;
     name?: string;
     email?: string;
   }

   const user: Required<User> = {
     id: 1,
     name: 'Alice',
     email: 'alice@example.com'
   }; // Все свойства должны быть указаны
   

3️⃣Readonly: Делает все свойства типа только для чтения.

      interface User {
     id: number;
     name: string;
     email: string;
   }

   const user: Readonly<User> = {
     id: 1,
     name: 'Alice',
     email: 'alice@example.com'
   };

   user.id = 2; // Ошибка: свойство id доступно только для чтения

Утилити типы — это встроенные типы, которые позволяют легко изменять, расширять и комбинировать другие типы. Они делают код более гибким, безопасным и удобным для поддержки. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе

Как повысить эффективность вебинаров? Организация продающего вебинара - не простая задача, ведь необходимо предусмотреть множество деталей: удобную дату, вовлекающий контент, методы продвижения и взаимодействия с участниками. Вебинары от МТС Линк помогают привлекать новых клиентов и увеличивать конверсию из участника в лид. В сервисе доступен анализ поведения пользователей во время вебинара, синхронный перевод, автовебинары и интерактивные инструменты для вовлечения участников. Делимся методичкой с кейсами, чек-листами и инструкциями для маркетологов, PR и event-менеджеров, чтобы сделать вебинары эффективным инструментом для лидогенерации. Получите методичку бесплатно на сайте. Скачать #реклама 16+ mts-link.ru О рекламодателе

Зачем нужна функция iife ? Спросят с вероятностью 7% IIFE (Immediately Invoked Function Expression) — это функция, которая определяется и вызывается немедленно после ее создания. IIFE полезны по нескольким причинам: Основные преимущества 1️⃣Изоляция кода: Создают новую область видимости, что помогает избежать загрязнения глобального пространства имен. Это особенно полезно при работе с переменными, которые могут конфликтовать с другими частями кода. 2️⃣Создание приватных переменных: Переменные, объявленные внутри IIFE, не доступны снаружи, что делает их приватными. Это помогает защитить данные и функции от нежелательного доступа или модификации. 3️⃣Предотвращение конфликтов переменных: Поскольку IIFE создают собственную область видимости, переменные внутри них не конфликтуют с переменными в других частях программы. 4️⃣Инициализация кода: IIFE часто используются для выполнения однократной инициализации, которая должна произойти сразу после загрузки кода. Синтаксис IIFE Может быть объявлена с помощью двух основных синтаксисов: 1️⃣Анонимная функция

(function() {
  console.log('This is an IIFE');
})();

2️⃣Функция с именем

(function namedIIFE() {
  console.log('This is a named IIFE');
})();

Примеры 1️⃣Изоляция переменных

var i = 10;

(function() {
  var i = 20;
  console.log(i); // 20
})();

console.log(i); // 10

В этом примере переменная i внутри IIFE не конфликтует с переменной i в глобальной области видимости. 2️⃣Создание приватных переменных

var counter = (function() {
  var count = 0;

  return {
    increment: function() {
      count++;
      return count;
    },
    reset: function() {
      count = 0;
    }
  };
})();

console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
counter.reset();
console.log(counter.increment()); // 1

Здесь переменная count является приватной и доступна только через методы increment и reset. 3️⃣Инициализация кода

(function() {
  console.log('IIFE for initialization');
  // Initialization code here
})();

IIFE нужны для создания новой области видимости, изоляции кода, создания приватных переменных и предотвращения конфликтов переменных. Они выполняются сразу после объявления и часто используются для инициализации кода. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Техническая поддержка и доработка сайтов "под ключ" Обновление, доработка и развитие сайтов. Любая CMS и сложность. Гарантия! ✅ Выгодные цены ✅ Сертифицированные специалисты ✅ Полная безопасность ✅ Опыт 14 лет Мы делаем быстрые, красивые и фунциональные сайты 👌 Узнать больше #реклама ivit.pro О рекламодателе

👩‍💻 Программирование теперь в телеграм! Вот обширная база материалов, которая ежедневно обновляется, выбирай своё направление: Обучение JavaScript с нуля Обучение Python с нуля Обучение Java с нуля Обучение HTML/CSS с нуля Обучение C/С++ с нуля Обучение С# с нуля Обучение SQL/GO/PHP с нуля Обучение Kotlin/Swift с нуля ⛓ Архив на 1789ГБ: Курсы, книги, шпаргалки, статьи, видео ресурсы — всё собрано в одном месте: @roadmap_ready

Что такое ssr ? Спросят с вероятностью 7% SSR (Server-Side Rendering) — это технология рендеринга веб-страниц на сервере, а не на клиенте. В контексте современных JavaScript-фреймворков, таких как React или Vue.js, это означает, что HTML-код страницы генерируется на сервере и отправляется в браузер уже готовым для отображения. Это отличается от традиционного подхода клиентского рендеринга (Client-Side Rendering, CSR), где HTML генерируется непосредственно в браузере с использованием JavaScript. Основные особенности и преимущества 1️⃣Улучшение производительности и скорости загрузки: ✅Первичный контент: Поскольку HTML генерируется на сервере, браузеры могут отображать готовый контент без необходимости ждать загрузки и выполнения JavaScript. ✅SEO: Поисковые системы лучше индексируют страницы, так как весь контент доступен сразу. 2️⃣Лучшая поддержка SEO: ✅Статические HTML-страницы, генерируемые сервером, легче индексируются поисковыми системами, что улучшает видимость сайта в поисковых результатах. 3️⃣Улучшенное восприятие пользователем (First Paint): ✅Пользователи видят контент быстрее, так как сервер отправляет уже готовую HTML-разметку. Как он работает 1️⃣Запрос от клиента: ✅Браузер отправляет запрос на сервер для получения страницы. 2️⃣Генерация HTML на сервере: ✅Сервер запускает JavaScript-код для рендеринга компонента или всей страницы. ✅Сервер генерирует HTML-код и отправляет его клиенту. 3️⃣Отображение страницы в браузере: ✅Браузер получает готовую HTML-страницу и отображает её. ✅Затем JavaScript-фреймворк (например, React или Vue) «гидрирует» страницу, то есть связывает готовую HTML-разметку с JavaScript-кодом, чтобы сделать страницу интерактивной. Next.js — популярный фреймворк для React, который поддерживает SSR из коробки. 1️⃣Установка Next.js:

      npx create-next-app my-ssr-app
   cd my-ssr-app
   npm run dev
   

2️⃣Создание страницы с SSR:

      // pages/index.js
   import React from 'react';

   const Home = ({ data }) => {
     return (
       <div>
         <h1>Server-Side Rendering Example</h1>
         <p>{data.message}</p>
       </div>
     );
   };

   // Эта функция вызывается на сервере при каждом запросе к странице
   export async function getServerSideProps() {
     // Выполняем запрос к API или базе данных
     const res = await fetch('https://api.example.com/data');
     const data = await res.json();

     // Передаем данные как пропсы в компонент
     return {
       props: {
         data
       }
     };
   }

   export default Home;
   

В этом примере Next.js использует функцию getServerSideProps для получения данных на сервере перед рендерингом страницы. Эти данные затем передаются в компонент как пропсы и используются для генерации HTML. SSR (Server-Side Rendering) — это процесс рендеринга веб-страниц на сервере, а не в браузере. Это улучшает производительность, SEO и восприятие пользователем за счет отправки готового HTML-кода с сервера. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Фронтенд в картинках — просто, наглядно и понятно. Новые знания в компактном формате каждый день. Присоединяйтесь: @FrontendPortal

Канал приближается к 20к подписчиков, а здесь так и нет нормального контент плана 😒 Ищу талантливых журналистов, способных писать клевые и авторские посты на тему "Карьера в IT" и все что с этим связано: поиск работы, повышение з/п, разбор кейсов, переезд в другие страны по рабочим визам, аналитика, исследование рынка и т.д. Важно глубокое понимание IT индустрии, вы должны иметь опыт работы в ней Если интересно отправьте мне свое резюме @kivaiko

Что такое всплытие ? Спросят с вероятностью 7% Всплытие (или бабблинг, event bubbling) — это механизм обработки событий в веб-разработке, при котором событие, происходящее на одном элементе, сначала обрабатывается этим элементом, а затем последовательно передаётся (всплывает) вверх по дереву DOM к его родительским элементам вплоть до корневого элемента (обычно document). Как работает всплытие событий Когда это происходит на элементе, сначала выполняются обработчики, прикрепленные к самому элементу, затем к его родителю, потом к родителю родителя, и так далее до document. Рассмотрим пример с вложенными элементами и обработчиками событий:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Event Bubbling</title>
</head>
<body>
  <div id="parent" style="padding: 20px; background-color: lightblue;">
    Parent
    <div id="child" style="padding: 20px; background-color: lightcoral;">
      Child
    </div>
  </div>

  <script>
    document.getElementById('parent').addEventListener('click', () => {
      alert('Parent clicked!');
    });

    document.getElementById('child').addEventListener('click', () => {
      alert('Child clicked!');
    });
  </script>
</body>
</html>

В этом примере, если вы кликнете на элемент #child, вы увидите два алерта: сначала "Child clicked!", затем "Parent clicked!". Это происходит потому, что событие клика всплывает от элемента #child к его родителю #parent. Управление всплытием Иногда нужно предотвратить всплытие события, чтобы оно не передавалось родительским элементам. Это можно сделать с помощью метода event.stopPropagation().

<script>
  document.getElementById('parent').addEventListener('click', () => {
    alert('Parent clicked!');
  });

  document.getElementById('child').addEventListener('click', (event) => {
    alert('Child clicked!');
    event.stopPropagation(); // предотвращает всплытие события
  });
</script>

Теперь, если вы кликнете на элемент #child, вы увидите только алерт "Child clicked!", так как всплытие события было остановлено. Захват событий Помимо всплытия, существует другой этап обработки событий, называемый захватом (event capturing). Событие сначала идет сверху вниз от корневого элемента к цели (начиная с document и заканчивая целевым элементом), а затем поднимается обратно вверх (всплытие). Чтобы добавить обработчик на этапе захвата, нужно передать true в качестве третьего аргумента в addEventListener:

<script>
  document.getElementById('parent').addEventListener('click', () => {
    alert('Parent clicked!');
  }, true);

  document.getElementById('child').addEventListener('click', () => {
    alert('Child clicked!');
  }, true);
</script>

Всплытие событий — это механизм, при котором событие сначала обрабатывается целевым элементом, а затем передается его родителям по дереву DOM. Чтобы остановить всплытие, можно использовать event.stopPropagation(). 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых