TypeScript 5.0 - Функции декораторы

Всем привет! Сегодня хотел бы рассказать о довольно свежей фиче в TS.

И так, что это за функция декоратор?

Это обыкновенные функции, которые позволяют добавить дополнительное поведение классу, методу, свойству.

Пример класса без декоратора:

class Person {
age: number = 0

changeAge() {
console.log("Logger: Func start")
console.log("changing age...")
console.log("Logger: Func end")
}
}

const person = new Person();
person.changeAge()

Мы видим, что нам необходимо добавить логирование для метода, чтобы отследить его работу. В этом случае к нам на помощь приходят декораторы.

Пример декоратора:

function Logger<This, Args extends number[], Return>(
target: (this: This, ...args: Args) => Return,
context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>
) {
return function(this: This, ...args: Args) {
console.log("Logger: Func start")
const result = target.call(this, ...args)
console.log("Logger: Func end")

return result
}
}

Декоратор принимает функцию, к которой мы применяем этот декоратор и контекст.
И возвращает функцию, в которой мы можем добавить логирование, главное, не забыть вернуть результат выполнения функции target.
Теперь посмотрим, как применить декоратор к нашему классу:

class Person {
age: number = 0

@Logger
changeAge() {
console.log("changing age...")
}
}

const person = new Person();
person.changeAge()

Так же функции-декораторы можно объединять в цепочки.

Удачи в экспериментах!

🧐Сложность алгоритмов. Разбор Big O

В этой статье мы рассмотрим, почему знание сложности алгоритмов является важным навыком для разработчика, какие методы используются для оценки сложности, и какие практические применения можно найти для этого знания при создании веб-приложений.

Читать...

Отражения изображений с помощью CSS-свойства box-reflect

Позволяет отражать содержимое элемента в одном определенном направлении(above, below, right, left). Второй параметр отвечает за смещение. И что еще интереснее, мы можем добавить градиент в качестве эффекта затухания, используя третий параметр.

Поддержка свойства составляет 94.49%

😵‍💫Глубокий JS. В память о типах и данных

В этой статье мы заглянем под капот движка V8 и посмотрели, как в нем устроены основные типы данных.

Читать...

Обводка текста с помощью CSS-свойства text-stroke

Свойство определяет ширину и цвет обводки текстовых символов. Это сокращенная форма записи для следующих свойств:

webkit-text-stroke-width
webkit-text-stroke-color

Поддержка свойства составляет 96.59%

Drag and Drop(потяни и брось) на JS

HTML:

<div class="box">
    <!-- по умолчанию draggable="true" -->
  <img class="image" src="img/gift.jpg">
</div>
<div class="box"></div>

JavaScript:

const boxes = document.querySelectorAll(".box"),
            image = document.querySelector(".image");

boxes.forEach(box => {
  box.addEventListener("dragover", (e) => {
    e.preventDefault();
  });
  box.addEventListener("drop", () => {
    box.appendChild(image);
  });
});

По умолчанию перемещаться могут только ссылки, изображения и выделенные фрагменты. Чтобы добавить возможность перетаскивания другим элементам, нужно задать атрибуту draggable значение true:

<div draggable="true">Draggable element</div>

🔥Глубокий JS. Области тьмы или где живут переменные

В этой статье мы рассмотрим, где именно хранятся переменные и каким образом попадают в память.

Читать...

Ограничиваем текст заданным числом строк c помощью CSS-свойства line-clamp

Если текст превышает указанное число строк, то текст обрезается и в конце добавляется многоточие. Он работает только в комбинации вспомогательных свойств:

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient:vertical;  
  overflow: hidden;
}

Поддержка свойства составляет 96.44%

🕸GridStack + Vue 3 composition api

В этой статье я расскажу о странностях и сложностях, с которыми столкнулся в ходе её интеграции во Vue 3 проект.

Читать...

⏳Когда не нужны библиотеки для работы с часовыми поясами

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

Читать...

🧐Astro vs Next.js

В этой статье мы поговорим про основы Astro и Next.js — двух надежных, богатых функциями JavaScript‑фреймворков.

Читать...

🦾Кодогенерация и парсинг TypeScript с помощью typescript

В этой статье мы рассмотрим основные принципы работы с инструментами для генерации и парсинга typescript кода, а так же некоторые подводные камни, на которые я наткнулся при работе с ним.

Читать...

🚀Oxlint — более быстрая альтернатива ESLint

В этой статье автор расскажет, какие преимущества Oxlint предоставляет по сравнению со своим предшественником ESLint.

Читать...

💬 Вопрос с собеседования

Какие типы данных присутствуют в JavaScript?

Ответ:

Существует 8 типов данных. 7 примитивных и 1 сложный тип данных. Примитивные типы: number, string, boolean, symbol, bigInt, null, undefined. Сложный тип - object. Он используется для коллекций данных и для объявления более сложных сущностей. Также он передается по ссылке, а простые типы данных по значению

🤔 Чем живут senior фронтенд разработчики

Если вы уже подписаны на полезные каналы по фронтенду, но все равно чего-то не хватает… Может, живого опытного коллеги, который:

☑️ Расскажет, какие книги произвели переворот в его понимании JS

☑️ Посоветует бесплатные ресурсы, на которых можно потренироваться

☑️ Покажет, как настроил себе удобную и красивую цветовую схему в WebStorm

☑️ Поможет подготовиться к техсобесу

И просто поделится личным, как совмещает семью и работу, на каких конференциях бывает, что думает. Подписывайтесь на авторский канал Зара Захарова, ведущего разработчика ВК.

👥Вот почему мы всегда пишем селекторы на XPath

В этой статье поговорим про XPath — мощный и гибкий инструмент для работы с веб-интерфейсами, который при этом почему-то остается не особенно популярным.

Читать...

👥Как мы оптимизировали процессы обеспечения качества

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

Читать...

😎Техники для повышения гибкости в управлении проектами в период кризиса

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

Читать...

👤Идентификация пользователей в Web 3.0

В этой статье я расскажу, какие требования к идентификации могут предъявлять веб-приложения современного настоящего и ближайшего будущего.

Читать...

😼Плагин на LibreOffice с Gigachat API

В этой статье пойдет речь о решении, позволяющем упростить написание текстов при работе с офисным пакетом LibreOffice.

Читать...

🦹‍♂️Загрязненный — значит опасный: про уязвимость Prototype Pollution

В этой вы узнаете о том, как нужно пользоваться библиотекой, чтобы точно столкнуться с уязвимостью Prototype Pollution.

Читать...