TypeScript #11 Декораторы (Decorators)

Показать описание

#YauhenK #webDev #TypeScript

Всех приветствую в курсе «TypeScript».
В данном видеокурсе мы с вами рассмотрим возможности языка строгой типизации - TypeScript. Разберём его основные фишки и ключевые отличия от JavaScript. Изучим такие понятия, как перечисления (Enum), интерфейсы, пространства имён. Рассмотрим набор нативных утилит, которые предоставляет сам язык.

✒ Репозиторий курса:

✒ Полезные ссылки:

✒ Полный список готовых и планируемых курсов:

✒ Автор курса:

Рекомендации по теме

Комментарии

Тут нужно объяснить, что такое вообще декораторы и зачем они нужны. Идея такая: мы функцию (объект, класс) оборачиваем другой функцией, которая, сделав своё дело, вызовет обёрнутую функцию с теми же параметрами, как и без обёртки. Таким образом ни функция ни вызывающий её код не почувствуют разницы. Что нам это даёт? Во-первых, мы можем обернуть уже обёрнутую в другую обёртку функцию, сделать это сколько угодно раз, и ничего не сломается (по идее). Во-вторых, мы можем гибко добавлять такие обёртки хоть в рантайме, и код отработает так же (если обёртки сделаны правильно). Эта идея реализуется в разных крутых штуках и имеет много названий: High Order Component в React, middleware в node, декораторы в Java, ну и, получается, в Type Script.
Вообще, в JS провернуть такое не сложно. Например, мы хотим сделать функцию-шпиён, которая фиксирует, сколько раз и с какими аргументами была вызвана любая другая функция. Мы создаём функцию-декоратор, которая в качестве аргумента принимает функцию для наблюдения. Она сохраняет переданную ей функцию и массив с аргументами вызовов, после чего возвращает функцию, которая вызывается с любым количеством аргументов, делает своё черное дело (пушит в массив аргументы текущего вызова) и вызывает обёрнутую функцию с этими аргументами. Мы нашу исходную функцию заменяем возвратом из декоратора. Если очень интересно, но ничего не понятно, могу набросать код (или просто загуглите "функции-обёртки для тестирования"). Таким образом, ни вызывающий код ни обёрнутая функция не почувствуют подвоха и отработают как надо.
Но есть одно "но". Каждый декоратор нужно вызывать с аргументом оборачиваемой функции. А если их много, получается цепочка вложенных вызовов. Такое неприятно читать, и писать. Поэтому, придуманы разные способы упростить такой синтаксис. Например, можно сделать функцию-комбинатор, которой первым аргументом ты передаёшь массив декораторов, а вторым функцию, которую нужно ними всеми обернуть. А комбинатор уже внутри проходится по массиву и поочерёдно всё оборачивает. Type Script пошел дальше, и нашел (да С#, нашел) специальный синтаксис: когда компилятор встречает @ то он ищет функцию с именем, указанным после @, оборачивает в неё то что следующей строкой: передаёт в неё соответствующие аргументы (см. видео) и обеспечивает вызов обёрнутой функции со всеми аргументами вызова после отработки обёртки, при условии, что из неё вернулся undefined. Ну или как-то так. Теперь, я надеюсь, содержимое видео понятно полностью.

simplewebdev

Вот примерно тут, я перестал понимать происходящее

D_TR_

Проще говоря, декораторы нужны для: инкапсулирования логики, добавления дополнительного функционала к *классам*, *методам*, *свойствам* и другим элементам кода.
Вот наглядный пример использования декоратора класса:
// Декоратор для проверки прав доступа
function isAdmin(target: any) {
const userIsAdmin = true; // Предположим, что пользователь администратор

if (!userIsAdmin) {
throw new Error("У вас нет прав доступа к этой панели администратора.");
}

return target;
}

@isAdmin // вызов декоратора
class AdminPanel {
deleteUser(userId: number): void {
// Реализация удаления пользователя
}

// Другие методы админ-панели
}

const adminPanel = new AdminPanel();
adminPanel.deleteUser(123); // Метод вызовется только, если пользователь администратор

ohwooow

Ничего не понятно, но очень интересно)))

ДаниилКедров

совсем не понял применение декораторов ((( очень мало объяснили ... для чего там консоль и чем ее можно заменить полезным ... что нам это дает ... 100% нужно видео с практикой и разъяснением ;) а так в любом случае Вы единственный кто все до этого объяснил доходчиво! Спасибо!

aleksandrgradov

Вообще ничего непонятно. Что за декораторы и зачем они мне нужны? Где их использовать?
Сначала было заявлено на 1:36, что декораторам обязательно нужно передавать единственным аргументом конструктор класса. Окей. Непонятно совершенно зачем и почему, а тем более как в функцию передать конструктор класса (взрыв мозга). Но ладно, допустим, может дальше понятно станет..
А на 3:33 декоратор уже с какого-то перепуга принимает не единственный аргумент, а целых два, и не конструктор, а объект и строчку. ЧТО ТЫ ЕСТЬ?!

epicmap

Женя, ничего не возвращающая функция в JS возвращает undefined, а не null. 3:04 - target - прототип класса, к которому применяется декоратор. Имеется в виду User.prototype ? т е декораторы исполняются в момент создания класса, а не в момент создания инстанса. В ООП, насколько я помню, декораторы модифицируют поведение объекта. Вероятно, в случае таких декораторов, как здесь, можно переопределить тело функции через возвращаемый PropertyDescriptor.

bierenika

"Если декоратор класса вернет значение, то он заменит объявление класса с помощью предоставленного конструктора" - что это значит? У меня выводит ошибку в таком случае "Unable to resolve signature of class decorator when called as an expression".

АнтонАлябьев-пй

интересное видео, почти нигде нет информации про декораторы в ТС, спасибо!

АнатолийГорбов-оь

Смотрел про декораторы первый раз, не хватило более подробной информации о том, что это в базовом понимании

VladislavRUS

Так нужно сделать видео про декараторы. О, идея! google -> typescript decorator. Читаем -> готово. Я гений!

Teardrop-uz

Видео супер, спасибо. Все очень интересно, но ничего не понятно. Нет ответа на главный вопрос - для чего они вообще? Какой-нибудь бы пример, как с их помощью решить какую-то проблему.

aleksandrmikhailov

Я чот вообще не воткну. Переписываю твои примеры и мне TS ругается на декораторы.
Вот например с декоратором свойства выдает такую ошибку:

Unable to resolve signature of property decorator when called as an expression.
Argument of type 'undefined' is not assignable to parameter of type 'Object'.ts(1240)

eyecent

Обещал ссылку на урок в описании и забыл!

podpalmoi

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

spxfrontend