JS

TypeScript — это JavaScript с типами, что логично. А вот и они, слева направо:

SVG-графика поддаётся анимированию. В этой статье мы покажем, как анимировать отрисовку контуров.

Сначала мы разберём свойства SVG-анимации и синтаксис библиотеки Anime.js, а затем анимируем отрисовку котов. Если вы уже знакомы с теорией, можете сразу перейти к практике.

Для анимации нам понадобятся:

• элемент path — контур;
• атрибуты обводки: stroke и stroke-dashoffset;
• библиотека Anime.js.

CSS-in-JS — новый подход к стилизации компонентных веб-приложений. Он помогает преодолеть ряд ограничений и проблем традиционных методов работы с CSS.

Посмотрим, какие проблемы есть в традиционном CSS, и как CSS-in-JS их решает.

Вы рекомендовали использовать ключи -DE, в статье просто -D, в документации:

npm install webpack-dev-server --save-dev

Объясните, что делают различные флаги при установке пакетов -D -de -save-dev? Чем они отличаются? Что по факту делает этот флаг? Что будет если его не поставить при установке пакета?

Для обновления пакетов мы используем ключи -DE (их следует писать прописными). Это сокращённая запись.

D— псевдоним для -save-dev. Когда мы используем D, то подразумеваем, что пакет должен быть установлен в devDependencies (зависимости для разработки).

E— псевдоним для -save-exact. С помощью этого параметра фиксируем версию. Если им не воспользоваться, то рядом с версией пакета в package.json появится «крышечка», символ ^.

Вот и получается, что указание -DE равносильно применению --save-dev и --save-exact. Разницы нет никакой. Просто запись короче и проще запомнить, но это вкусовщина. Каждый делает, как нравится.

Дженерики (generic) помогают писать универсальный, переиспользуемый код, а также в некоторых случаях позволяют отказаться от any. Главная задача дженериков — помочь разработчику писать код, который одинаково будет работать со значениями разных типов.

Посмотрим на примере из реального мира.

Представьте завод по изготовлению автомобилей. Старый завод, который проектировался для сборки автомобиля определённой модели. На нём могут собирать только такую модель автомобиля, а если потребуется выпустить машину с немного другим кузовом, то придётся строить новый завод. Это неоптимальное решение. Если разные машины собираются одинаково, то лучше научиться собирать разные машины на одном заводе.

Добрый вечер. Объясните, пожалуйста, подробнее про type predicates в TS. В каких случаях их можно использовать. Например, когда к одному обработчику можно применить union type и в нем задать, например TouchEvent | MouseEvent. Для чего использовать in в type predicates? Спасибо.

Отвечает Игорь Антонов, автор курсов по JavaScript в Академии.

В JavaScript и TypeScript есть конструкции для проверки типа. Достаточно вспомнить ООП и оператор instanceof. Начнём немного издалека и посмотрим на такой код:

class Dog {}

class Cat {}

const keks = new Cat();
const buddy = new Dog();

function isCat(something) {
  if (something instanceof Cat) {
    return true;
  }
  return false;
}

Функция умеет отличать котов от собак, в ней объявлено два класса и функция isCat. Если аргументом передать keks, функция вернёт true. Для аргумента buddy результатом станет false. Проверка внутри функции реализована с помощью оператора instanceof.

Теперь вернёмся к TypeScript и взглянем на такой код:

type Dog = { 
  isBig: boolean;  name: string; 
}  

type Cat = {  
  lives: number;  name: string; 
}  

type Animal = Dog | Cat;  

function getAnimal(): Animal {
  return { isBig: true, name: "spike" };
}

Мы описали два типа (Dog и Cat), воспользовались типом объединения и вывели Animal. Ещё мы определи функцию getAnimal. Она позволяет получить объект для описания животного. Судя по форме объекта — это Dog.

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

Что дает автоматизация. Автоматизация экономит время разработчика, помогает найти и исправить ошибки. При этом создаются коды, которые экономят время браузера и ускоряют загрузку сайта.

Какие задачи могут быть автоматизированы. Например, минификация файлов (html, css, js), сжатие изображений, получение изображения определенных форматов (webp), сборка файла sprite.svg, сборка пакета приложения.

С помощью каких инструментов осуществляется автоматизация. Сообществом программистов созданы целые библиотеки программ для автоматизации. Также есть системы для лёгкого доступа к этим библиотекам и использования их в разработке новых программ и приложений. Одной из таких систем является система Node.js.

Многие проблемы, с которыми мы сталкиваемся при разработке, уже кто-то решил за нас. Поэтому не нужно придумывать новые решения или создавать костыли — лучше использовать в проекте готовые паттерны.

Иногда разработчики используют их в своей работе не задумываясь — просто могут не знать об этом. Например, когда вы создаёте механизм для получения разных вариантов карточек товаров, то невольно используете паттерн «Фабрика».

Паттерны упрощают разработку. Предположим, вы создаёте проект с нуля. Если вы используете для него самописную архитектуру, то потратите на работу больше времени. А если, например, используете архитектуру MVC, то сократите время на разработку и снизите вероятность появления ошибок в программе, к тому же новые сотрудники смогут быстрее присоединиться к работе и вникнуть в детали.

Для многих задач есть свой паттерн — нужно лишь выбрать подходящий шаблон проектирования и правильно его использовать.

Главные новинки — top-level await, объявления полей класса, .at () и hasOwn.

Так, теперь можно использовать await для модулей на верхних уровнях. Раньше await нельзя было использовать вне функций.

const response = await fetch('https://example.com');
const text = await response.text();

Два важнейших преимущества top-level await:

• Гарантия того, что модули не получат доступ к асинхронному импорту, пока они не будут полностью инициализированы;
• Прозрачная обработка асинхронности: импортёрам не нужно знать, является ли импортируемый модуль асинхронным или нет.

Также это позволит загружать модули условно:

if(download) {
  await require('/special-code-for-2023-year.js')
}

Или позволит просто указать ссылку до другого ресурса, если с первым произошла ошибка:

let lodash;
try {
  lodash = await import('https://primary.example.com/lodash');
} catch {
  lodash = await import('https://secondary.example.com/lodash');
}

Также можно использовать тот ресурс, который загрузился быстрее:

const resource = await Promise.any([
  fetch('http://example.com/first.txt')
    .then(response => response.text()),
  fetch('http://example.com/second.txt')
    .then(response => response.text()),
]);

Из-за Promise.any(), переменная resource инициализируется через ту загрузку, которая завершится первой.

Что делает разработчик, если ему нужно раскрасить кнопку в красный цвет? Ищет в npm пакет, окрашивающий кнопки в красный цвет.

В реестре npm существует более миллиона пакетов для решения практически любых задач разработчика. Например, с их помощью можно минифицировать код, удалять и переименовывать файлы, создавать спрайты, работать с препроцессорами и выполнять многие другие действия, упрощающие и автоматизирующие работу над проектом.

Конечно, бездумно использовать менеджер пакетов не стоит: некоторые задачи можно решить и без него. Но всё же npm-пакеты полезны и постоянно применяются в веб-разработке. Поэтому важно знать, как их правильно выбрать, где искать и на что обратить внимание перед установкой.