DEV Community: Mikhail Shokun

Типизация TS

Mikhail Shokun — Sun, 23 Apr 2023 12:06:26 +0000

Явное присваивание
Типы в TypeScript объявляются следующим синтаксисом:
переменная: тип = значение
Мы можем присвоить любой тип, который есть в JavaScript:

const foo: string = '12rock';
const bar: number = 123;
const fee: boolean = true;

Неявное присваивание
Однако, TypeScript сам умеет определять типы. Если мы объявим переменную и сразу присвоим ей значение, то TypeScript все поймет и запись с двоеточием можно будет опустить:

const foo = '12rock'; //TS сам поймет что здесь храняться только строки
const bar = 123; // TS поймет что числа
const fee = true; // TS поймет что булевы значения

Объединение
Типы можно объединять, сам процесс так и называется объединение. Записывается он так:
переменная: тип1 | тип2 = значение;
На данный код внизу компилятор не выдаст ошибку:

let foo: number | string = 123;
foo = '123';

Встроенные типы и неявная типизация
Вопрос: Но как типизировать переменную, которая например содержит дату? Что нам с ней делать?!

Ответ: Для таких случаев в TypeScript уже существуют встроенные типы из JavaScript.

Мы можем объявить дату вот так:
const date: Date = new Date;
Встроенных типов очень много, поэтому TypeScript может определять тип без явного указания.
Как это работает? Просто инициализируйте переменную, при инициализации TypeScript сам подберет нужный тип.
const date = new Date;
Типизация функций
Нам нужно типизировать входные и данные и данные которые нам функция отдает (выходные):
function имя(параметр: тип, параметр: тип, ...): тип выходного значения {}
Рассмотрим пример, где функция принимает два аргумента и отдает нам их сумму:

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

Дженерики
Дженерик - Array - указываем Array и в треугольных скобках то, из чего может состоять данный класс или объект.

Массив из разных типов
Тип данных Tuple, где мы можем указать из какого множества типов он состоит, например: const contact: [string, number] = ['Michael', 46570294]

*Тип never *
Используется в тех случаях когда функция может никогда не закончится (странный тип, пригодиться наверное не часто, но нужно про него знать)

Type
Также можно создавать свои типы через ключевое слово type, пример:

type Login = string; const login: Login = 'qwerty'
также можно указывать через бинарный оператор "|" ИЛИ какими типами может быть переменная:

type Login = number | string;

Типы null и undefined
Обычно записывается в проектах так:
type Name = string | null | undefined

Interfaces
Поля в интерфейсах могут быть только читаемые (readonly id: number), неизменяемые. Также свойства могут быть необязательными (color?: string). Пример:

interface Rect {
 readonly id: string
 color?: string
 size: {
   width: number
   height: number
 }
}

применение типа:

const rect1: Rect = {
 id: '1234',
 size: {
  width: 30,
  height: 20
 },
color: '#fff'
}

Интерфейсы часто называют с первой большой буквой "I", чтобы было понятно что это интерфейс. Интерфейсы могут наследоваться:

interface RectWithArea extends Rect {
  getArea: () => number
}

const rect5: RectWithArea = {
  id: '123',
  size: {
    width: 20,
    height: 20
  },
  getArea(): number {
    return this.size.width * this.size.height
  }
}

большая часть информации взятая отсюда
автор: Даниил Шило

Собеседование React.JS

Mikhail Shokun — Thu, 14 Jul 2022 08:27:39 +0000

1 Что такое React?

● React - JavaScript фронтенд библиотека, разработанная Facebook в 2011
● В ядре - компонентный подход, позволяющий создавать переиспользуемые UI
блоки
● Служит, для создания сложных интерактивных UI для web и мобильной
разработки

2 Какие основные преимущества есть в React?

● Увеличивает производительность отрисовки приложений
● Может использоваться и на клиенте и на сервере
● Из-за JSX читаемость кода увеличивается
● Легко интегрировать с другими фреймворками
● Легко писать unit тесты

3 Какие есть ограничения в React?

● React - всего лишь библиотека
● Требуется некоторое время на освоение
● Может быть немного сложным для начинающих
● Код по-началу может выглядеть сложным из-за инфраструктуры и JSX

4 Что такое JSX?

JSX - ярлык для JavaScript XML. Это специальный синтаксис, который расширяет
JavaScript возможностью писать HTML внутри
Это позволяет интегрировать шаблоны компонентов прямо в JavaScript, что делает
разработку проще

5 Что такое Virtual DOM в React?

Virtual DOM - легковесный JavaScript объект, который представляет копию реального
DOM дерева. Нужен для оптимизации взаимодействия с DOM

6 Что такое Props?

Сокращенно от Properties. Входящие свойства в компонент. Они только для чтения и
их нельзя менять. Всегда идут от родителя к ребенку.

7 Что такое state и как он используется?

Обычный объект - источник данных. Содержит информацию по поведению и
состоянию интерфейса. Можно мутировать

8 Что такое refs в React?

Сокращенно от References. Специальный атрибут, позволяющий получить доступ до
конкретного DOM элемента
Нужен для:
● Вызова анимаций
● Для задания фокуса или выделения текста
● Взаимодействия со сторонними библиотеками

9 Что такое JEST?

JavaScript фреймворк, для юнит тестирования на основе Jasmine. Разработал
Facebook. Очень удобен именно для React

10 Когда следует использовать Class компоненты, а когда

функциональные?
Если нужны жизненные этапы компонента - используем class компоненты
Иначе для оптимизации лучше функциональные

11 Что происходит, когда вы вызываете setState?

Вначале React соединяет объект стейта с измененными полями. На основе нового
состояния строит новое дерево React элементов и выясняет, какие именно части
приложения должны быть изменены
Это нужно для наиболее производительного обновления интерфейса

12 В чем разница между state и props?

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

13 Когда следует делать асинхронные запросы на сервер в React?

Для этого служит метод componentDidMount
Или useEffect с пустым набором зависимостей

14 В чем смысл специального атрибута key?

Атрибут позволяет React понимать, какие именно элементы в списке были
модифицированы или удалены, что увеличивает производительность рендеринга.
Лучше всего использовать уникальные значения, такие как ID. Индексы использовать
не рекомендуется

15 Что значит компонент mounted?

Шаблон компонента соединен с DOM деревом

16 Назовите разницу между контролируемым и

неконтролируемым компонентом
● Контролируемый компонент обладает своим стейтом, управляемый React
● Неконтролируемые компоненты обладают внутренним стейтом (как пример
значение тега textarea)

17 Что такое фрагменты?

Специальный элемент в React позволяющий возвращать группу элементов без
дополнительного родительского DOM элемента

18 Как React обрабатывает пользовательские события?

Добавляет один обработчик события на корневой элемент.
Объект события оборачивает в свою обертку - SyntheticEvent для кроссбраузерности

19 Что такое Redux?

Библиотека для работы с потоком данных в JavaScript.
Позволяет добавить дополнительный слой для приложения, где состояние описано в
JavaScript объекте. Нужно для более удобного написания кода

20 Назовите основные этапы жизненного цикла компонента

● componentWillMount - перед рендерингом, в основном для настройки
компонента
● render - процесс рендеринга
● componentDidMount - уведомляет, про то, что компонент соединен с DOM
деревом
● componentWillReceiveProps - уведомляет, про то, что приходят новые
входящие свойства в компонент
● shouldComponentUpdate - возвращает true или false и служит для
оптимизации. Решает, нужно ли делать ре-рендеринг
● componentWillUpdate - уведомляет, что компонент будет обновлен
● componentDidUpdate - уведомляет, что компонент был обновлен
● componentWillUnmount - используется для удаления слушателей и очистки
компонента. Вызывается перед удалением компонента

21 В setState можно передавать объект или функцию. В чем

разница и что лучше использовать?
props и state могут изменяться асинхронно. Если мы передадим функцию, то мы
точно будет знать, что стейт основывается на предыдущем состоянии

22 Назовите разницу между Презентационным и Контейнер

компонентом?
● Презентационный - “как вещи выглядят”. Нужен для создания интерфейса.
Работает на входящих параметрах
● Контейнер - “как вещи работают”. Обладают состоянием, подключены к Flux или
Redux

23 Что такое Context?

Context - позволяет передавать свойства от родителя к ребенку, избегая
промежуточных компонентов

24 Что такое Higher-Order компоненты?

Higher-order component (HOC) - функции, у которых входящий параметр компонент.
Возвращают новый компонент с добавленным поведением.
Могут быть использованы в следующих случаях:

Переиспользование кода
Слой абстракции для state и взаимодействия с ним
Управление props

25 Что делает shouldComponentUpdate и почему он важен?

Этап жизненного цикла, который решает, будет ли ре-рендер, или нет
Позволяет оптимизировать приложение

26 Что такое store в Redux?

JavaScript объект, в котором содержится состояние приложения. Дополнительно
отвечает за следующее:

state может быть получен через getState()
Изменять state можно через dispatch(action)
Регистрировать изменения через subscribe(listener)

27 Что такое action в Redux?

Объект, который обязательно должен содержать ключ type. С помощью него Redux
понимает, что именно нужно сделать со стейтом

28 Что нельзя делать в методе render?

Нельзя изменять состояние компонента (например вызывать setState). Должен быть
чистой (pure) функцией

29 Какие типы middleware есть в redux для работы с

асинхронностью?

Redux Thunk
Redux Promise
Redux Saga 30 Что такое Pure Components? Тоже самое, что и Component, кроме того, что автоматически за вас реализует метод shouldComponentUpdate.

Подготовка к первому собесу

Mikhail Shokun — Sun, 10 Jul 2022 14:38:28 +0000

У меня в четверг 14.07.2022 должен быть первый собес. Сегодня воскресенье, сижу готовлюсь к собесу. Составил некоторый список, по которому нужно пройтись и повторить, а некоторое выучить заново (я не знаю про контекст (this) ничего, про promise и т.д.).

Список тем:

Переменные
Типы данных
Операторы
Преобразование типов
Циклы
Функции
Рекурсия и стек
Контекст (this)
Генераторы, итераторы
Fetch
Promise
async/await
Работа с DOM

1. Переменные

Переменная – это «именованное хранилище» для данных.
Имя переменной должно содержать только буквы, цифры или символы $ и _.
Первый символ не должен быть цифрой.
Существует 2 основных отличия var от let/const:
Переменные var не имеют блочной области видимости, они ограничены, как минимум, телом функции.
Объявления (инициализация) переменных var производится в начале исполнения функции (или скрипта для глобальных переменных).

2. Типы данных

Есть JavaScript 8 основных типов данных:
Number BigInt string boolean
null undefined object symbol

Переменная в JavaScript может содержать любые данные. В один момент там может быть строка, а в другой – число.

number для любых чисел: целочисленных или чисел с плавающей точкой; целочисленные значения ограничены диапазоном ±(253-1). Кроме обычных чисел, существуют так называемые «специальные числовые значения», которые относятся к этому типу данных: Infinity, -Infinity и NaN.

bigint для целых чисел произвольной длины. Чтобы создать значение типа BigInt, необходимо добавить n в конец числового литерала.

string для строк. Строка может содержать ноль или больше символов, нет отдельного символьного типа.

boolean для true/false.

null для неизвестных значений – отдельный тип, имеющий одно значение null.

undefined для неприсвоенных значений – отдельный тип, имеющий одно значение undefined.

symbol для уникальных идентификаторов.

Тип object (объект) – особенный. Все остальные типы называются «примитивными», потому что их значениями могут быть только простые значения (будь то строка, или число, или что-то ещё). В объектах же хранят коллекции данных или более сложные структуры.

Оператор typeof возвращает тип аргумента. Это полезно, когда мы хотим обрабатывать значения различных типов по-разному или просто хотим сделать проверку.
У него есть две синтаксические формы:
1) Синтаксис оператора: typeof x.
2) Синтаксис функции: typeof (x).

3. Операторы

Есть 3 основных вида операторов:

Базовые (либо математические)
Операторы сравнения
Логические операторы

Математические операторы в зависимости от применения могут быть двух типов: унарные и бинарные, отличаются от кол-ва операндов, к которым они применяются. Операнд (аргумент) - это то, к чему применяется оператор. Унарный оператор (-800) один операнд. "+" складывает и преобразовывает строки, остальные операторы могут только выполнять арифметические действия, то есть преобразуют все операнды в числа ("25" - 5 = 20 (тип данных Number). Применяя унарный оператор "+" к строке, имеющую цифру (например "25"), оператор преобразует строку в число, то есть + "25" (тип данных Number).

Логические операторы: цепочка ИЛИ (||) возвращает первое истинное значение или последнее, если такое значение не найдено.
И (&&) возвращает первое ложное значение. Или последнее, если ничего не найдено. Вышеуказанные правила схожи с поведением ИЛИ. Разница в том, что И возвращает первое ложное значение, а ИЛИ – первое истинное. Приоритет оператора && больше, чем у ||.
Оператор НЕ (!) сначала приводит аргумент к логическому типу true/false, затем возвращает противоположное значение.

Все операторы сравнения возвращают значение логического типа (true или false)

4. Преобразование типов

Существует 3 наиболее широко используемых преобразования: строковое, численное и логическое.
Строковое – Происходит, когда нам нужно что-то вывести. Может быть вызвано с помощью String(value). Для примитивных значений работает очевидным образом.
Численное – Происходит в математических операциях. Может быть вызвано с помощью Number(value):
undefined => NaN
null => 0
true / false => 1 / 0
string => Пробельные символы по краям обрезаются. Далее, если остаётся пустая строка, то получаем 0, иначе из непустой строки «считывается» число. При ошибке результат NaN.
Логическое – Происходит в логических операциях. Может быть вызвано с помощью Boolean(value):
0, null, undefined, NaN, "" => false
любое другое значение => true
Большую часть из этих правил легко понять и запомнить. Особые случаи, в которых часто допускаются ошибки:
undefined при численном преобразовании становится NaN, не 0.
"0" и строки из одних пробелов типа " " при логическом преобразовании всегда true.

5. Циклы

Циклы - простой способ сделать какое-то действие несколько раз.
Цикл for повторяет действия, пока не произойдёт какое-либо специальное событие завершения цикла.

for ([начало]; [условие]; [шаг]) выражения

Цикл do...while повторяется пока заданное условие истинно.

do
  выражения
while (условие);

Пример:
В следующем примере, цикл do выполнится минимум 1 раз и запускается снова, пока i меньше 5.

do {
  i += 1;
  console.log(i);
} while (i < 5);

Цикл while выполняет выражения пока условие истинно. Выглядит он так:

while (условие)
  выражения

Метка (label) представляет собой оператор с идентификатором, который позволяет вам ссылаться на какое-то место в вашей программе. Например, вы можете использовать метку, чтобы обозначить цикл, а затем использовать операторы break или continue, чтобы указать, должна ли программа прерывать цикл или продолжать его выполнение:

метка :
   оператор

В этом примере, метка markLoop обозначает цикл while.

markLoop:
while (theMark == true) {
   doSomething();
}

Используйте оператор break, чтобы прерывать цикл, переключать управление или в сочетании с оператором Label. Синтаксис оператора может быть таким:
1) break;
2) break Label;
Оператор continue используется, чтобы шагнуть на шаг вперёд в циклах while, do-while, for или перейти к метке. Синтаксис continue может выглядеть так:
1) continue;
2) continue Метка;

Оператор for...in проходит по всем перечислимым свойствам объекта. JavaScript выполнит указанные выражения для каждого отдельного свойства:

for (variable in object) {
  выражения
}

6. Функции

Создание функции:
Объявление функции (Function Declaration) по синтаксису является инструкцией (statement) и состоит из следующих частей:

function square(number) {
  return number * number;
}

Существует ещё один синтаксис создания функций, который называется Function Expression (Функциональное Выражение):

let sayHi = square(number) {
  return number * number;
};

Функции вида "function expression" удобны, когда функция передаётся аргументом другой функции.

Отличия Function Expression в сравнении с Function Declaration

Во-первых, синтаксис: как определить, что есть что в коде.

Function Declaration: функция объявляется отдельной конструкцией «function…» в основном потоке кода:

function sum(a, b) {
  return a + b;
}

Function Expression: функция, созданная внутри другого выражения или синтаксической конструкции. В данном случае функция создаётся в правой части «выражения присваивания» =:

let sum = function(a, b) {
  return a + b;
};

Более тонкое отличие состоит, в том, когда создаётся функция движком JavaScript.

Function Expression создаётся, когда выполнение доходит до него, и затем уже может использоваться.

После того, как поток выполнения достигнет правой части выражения присваивания let sum = function… – с этого момента, функция считается созданной и может быть использована (присвоена переменной, вызвана и т.д. ).

С Function Declaration всё иначе.

Function Declaration можно использовать во всем скрипте (или блоке кода, если функция объявлена в блоке).

Другими словами, когда движок JavaScript готовится выполнять скрипт или блок кода, прежде всего он ищет в нём Function Declaration и создаёт все такие функции. Можно считать этот процесс «стадией инициализации».
И только после того, как все объявления Function Declaration будут обработаны, продолжится выполнение.
В результате, функции, созданные, как Function Declaration могут быть вызваны раньше своих определений.

Метод — это функция, которая является свойством объекта.

7. Рекурсия и стек

Функция может вызывать саму себя. Три способа такого вызова:

1) по имени функции
2) arguments.callee
3) по переменной, которая ссылается на функцию

Функция, которая вызывает саму себя, называется рекурсивной функцией (recursive function). Получается, что рекурсия аналогична циклу (loop). Оба вызывают некоторый код несколько раз, и оба требуют условия (чтобы избежать бесконечного цикла, вернее бесконечной рекурсии). Информация о процессе выполнения запущенной функции хранится в её контексте выполнения (execution context). Контекст выполнения – специальная внутренняя структура данных, которая содержит информацию о вызове функции

8. Контекст (`this`)

Значение this – это объект «перед точкой», который использовался для вызова метода.
Функции, которые находятся в объекте в качестве его свойств, называются «методами».
Методы позволяют объектам «действовать»: object.doSomething().
Методы могут ссылаться на объект через this.
Значение this определяется во время исполнения кода.

При объявлении любой функции в ней можно использовать this, но этот this не имеет значения до тех пор, пока функция не будет вызвана.
Эта функция может быть скопирована между объектами (из одного объекта в другой).
Когда функция вызывается синтаксисом «метода» – object.method(), значением this во время вызова является объект перед точкой.
Также, заметим, что стрелочные функции являются особенными – у них нет this. Когда внутри стрелочной функции обращаются к this, то его значение берётся снаружи.

9. Генераторы, итераторы

Итераторы
Объект является итератором, если он умеет обращаться к элементам коллекции по одному за раз, при этом отслеживая своё текущее положение внутри этой последовательности. В JavaScript итератор - это объект, который предоставляет метод next(), возвращающий следующий элемент последовательности. Этот метод возвращает объект с двумя свойствами: done и value.

После создания, объект-итератор может быть явно использован, с помощью вызовов метода next().

Генераторы
Генераторы используют для создания итераторов.
В то время как пользовательские итераторы могут быть весьма полезны, при их программировании требуется уделять серьёзное внимание поддержке внутреннего состояния. Генераторы предоставляют мощную альтернативу: они позволяют определить алгоритм перебора, написав единственную функцию, которая умеет поддерживать собственное состояние.

Генераторы - это специальный тип функции, который работает как фабрика итераторов. Функция становится генератором, если содержит один или более yield операторов и использует function* синтаксис.

10. Fetch

Fetch API предоставляет интерфейс JavaScript для работы с запросами и ответами HTTP. Он также предоставляет глобальный метод fetch(), который позволяет легко и логично получать ресурсы по сети асинхронно.

11. Promise

Объект Promise используется для отложенных и асинхронных вычислений. Promise – это специальный объект, который содержит своё состояние. Вначале pending («ожидание»), затем – одно из: fulfilled («выполнено успешно») или rejected («выполнено с ошибкой»).

Синтаксис*

new Promise(executor);
new Promise(function(resolve, reject) { ... });

Пример:

// Создаётся объект promise
let promise = new Promise((resolve, reject) => {

  setTimeout(() => {
    // переведёт промис в состояние fulfilled с результатом "result"
    resolve("result");
  }, 1000);

});

// promise.then навешивает обработчики на успешный результат или ошибку
promise
  .then(
    result => {
      // первая функция-обработчик - запустится при вызове resolve
      alert("Fulfilled: " + result); // result - аргумент resolve
    },
    error => {
      // вторая функция - запустится при вызове reject
      alert("Rejected: " + error); // error - аргумент reject
    }
  );

Конечно, вместо setTimeout внутри функции промиса может быть и запрос к серверу и ожидание ввода пользователя, или другой асинхронный процесс. Главное, чтобы по своему завершению он вызвал resolve или reject, которые передадут результат обработчикам.

12. async/await

Объявление async function определяет асинхронную функцию, которая возвращает объект AsyncFunction.

После вызова функция async возвращает Promise. Когда результат был получен, Promise завершается, возвращая полученное значение. Когда функция async выбрасывает исключение, Promise ответит отказом с выброшенным (throws) значением.

Функция async может содержать выражение await, которое приостанавливает выполнение функции async и ожидает ответа от переданного Promise, затем возобновляя выполнение функции async и возвращая полученное значение.

Ключевое слово await допустимо только в асинхронных функциях. В другом контексте вы получите ошибку SyntaxError.

Цель функций async/await упростить использование promises синхронно и воспроизвести некоторое действие над группой Promises. Точно так же как Promises подобны структурированным колбэкам, async/await подобна комбинации генераторов и promises.
Пример:

async function add1(x) {
  const a = await resolveAfter2Seconds(20);
  const b = await resolveAfter2Seconds(30);
  return x + a + b;
}

13. Работа с DOM

Основой HTML-документа являются теги.
В соответствии с объектной моделью документа («Document Object Model», коротко DOM), каждый HTML-тег является объектом. Вложенные теги являются «детьми» родительского элемента. Текст, который находится внутри тега, также является объектом.

Все эти объекты доступны при помощи JavaScript, мы можем использовать их для изменения страницы.

It's my first post

Mikhail Shokun — Sat, 09 Jul 2022 11:59:36 +0000

Hello. Here I will write about my achievements in the IT-industry