Декораторы позволяют добавлять аннотации к объявлениям и членам классов.
В этой статье мы узнаем о TypeScript Accessor Decorators. Декораторы следуют структурному программному принципу проектирования с тем же названием Decorator и предоставляют гибкую альтернативу подклассам для расширения функциональности.
Чтобы узнать больше о расширенных функциях TypeScript, ознакомьтесь с другими моими статьями. Вот обзор:
Декоратор
Шаблон structural Decorator очень эффективен и помогает нам предотвратить взрыв подклассов.
Целью шаблона Decorator является динамическое возложение дополнительной ответственности на объект и предоставление гибкой альтернативы созданию подклассов для расширения функциональности.
Паттерн Decorator широко используется и применим во многих случаях. Используйте шаблон, когда хотите:
- создать большое количество подклассов. Иногда слишком много подклассов нецелесообразно и приводит к взрыву подклассов для поддержки каждой комбинации.
- добавляйте обязанности к отдельным объектам динамически, не затрагивая другие объекты.
- назначать дополнительное поведение объектам во время выполнения, не нарушая код, использующий эти объекты.
Декораторы машинописных текстов
Поскольку классы были представлены в Typescript и ES6, Typescript также хотел предоставить возможность поддержки аннотирования или изменения классов и членов классов с помощью декораторов.
Экспериментальная функция Typescript Decorator помогает нам украшать классы, методы, свойства, аксессоры и параметры. .
ПРИМЕЧАНИЕ Декораторы — это экспериментальная функция, которая может быть изменена в будущих версиях. — typescriptlang.org
Поскольку эта функция все еще является экспериментальной, нам сначала нужно включить ее, установив experimentalDecorators в true в пределах compilerOptions нашего tsconfig.json:
Как только эта дополнительная настройка будет выполнена, мы можем создать декораторы, которые можно использовать с @ перед аксессорами.
Декораторы используют форму
@expression, гдеexpressionдолжен возвращать функцию, которая будет вызываться во время выполнения с информацией о декорированном объявлении. — typescriptlang.org
Для начала, вот очень простой пример того, как создать функцию Accessor decorator с именем logMessage, которая будет возвращать внутреннюю функцию, чтобы просто распечатать message после вызова функции. .
Внешняя функция logMessage — это наша фабрика декораторов, которая позволяет нам передавать некоторые параметры. Наша фабрика декораторов просто принимает параметр message и передает его внутренней функции, которая будет вызываться декоратором во время выполнения.
Фабрика декораторов — это функция, которая возвращает декоратор. — blog.logrocket.com/a-practical-guide-to-typescript-decorators/
Декоратор принимает три параметра:
1. target = User класс
2. propertyKey — это «updateEmail»
3. descriptor — наш PropertyDescriptor
Интерфейс PropertyDescriptor выглядит так:
Теперь мы можем аннотировать любой метод доступа, используя @logMessage('some Message'). Одна особенность декораторов доступа заключается в том, что мы можем использовать их только для get или set члена, а не для обоих одновременно.
ПРИМЕЧАНИЕ TypeScript запрещает украшать оба метода доступа
getиsetдля одного члена. — typescriptlang.org
Допустим, у нас есть класс User, и мы используем декоратор следующим образом:
Каждый раз, когда мы обращаемся к геттеруfullName, мы видим в консоли новое сообщение:
Вот игровая площадка Typescript из приведенного выше примера.
Это был очень простой пример. Но декораторы Typescript могут быть гораздо более полезными и сложными. Существует пять типов декораторов:
- Декораторы классов
- Декораторы методов
- Декораторы доступа
- Декораторы свойств
- Декораторы параметров
На мой взгляд, имеет смысл подробно рассмотреть каждый тип декораторов, потому что декораторы Typescript — одна из наиболее сложных функций. В этой статье мы подробно рассмотрим декораторы доступа и проверим код, чтобы усвоить эту функцию.
В следующих статьях мы рассмотрим другие типы декораторов, ссылки на которые я приведу здесь. Вы также можете просто подписаться на мои истории, чтобы не пропустить их.
Аксессуар Декораторы
Мы уже видели очень простой декоратор accessor в нашем предыдущем примере. Давайте создадим более полезный.
Допустим, мы хотим сократить значение нашего аксессора fullName до определенного количества символов. Мы создадим наш собственный декоратор @trimString(maxLength), чтобы проверить, длиннее ли заданное значение, чем заданная длина, и вернуть его обрезанную версию:
В этом примере мы снова оборачиваем фабрику декораторов вокруг исходного метода доступа. На этот раз он содержит наш параметр maxLength для данной строки.
Сложность здесь заключается в том, что мы модифицируем исходный метод доступа fullName, обратившись к свойству get файла PropertyDescriptor. Теперь мы переопределяем исходный метод доступа get нашей модифицированной функцией. В этой функции мы получаем доступ к исходному значению fullName средства доступа и проверяем, длиннее ли оно, чем разрешенное количество символов maxLength. Если нет, мы просто возвращаем исходное значение, в противном случае мы обрезаем строку и ставим в конце три точки.
Теперь мы можем использовать функцию декоратора, аннотировав наш метод доступа fullName следующим образом:
Всякий раз, когда мы обращаемся к fullName для любого объекта User, возвращаемое значение обрезается до 10 символов. Также обратите внимание, что можно без проблем назначить несколько декораторов одному аксессору.
Вот как выглядят логи в этом примере при вызове user.fullName:
Вот игровая площадка Typescript для примера декоратора доступа.
Вызов кода 💻
Мы уже создали декоратор trimString для нашего класса User. Теперь мы добавили в наш класс новый метод доступа password. Для этого свойства мы хотим создать декоратор @validatePassword(minLength), который просто проверяет, имеет ли заданный пароль минимальную длину символов всякий раз, когда вызывается метод доступа set нашего свойства password.
Итак, если мы выполнили приведенный выше код и правильно реализовали наш декоратор @validatePassword(minLength), вывод должен выглядеть так:
Небольшое примечание. При хранении паролей в рабочих средах соблюдайте два простых правила:
- Никогда не храните пароли в виде простого текста
- НИКОГДА НЕ ХРАНИТЕ ПАРОЛИ В ОБЫЧНОМ ТЕКСТЕ
Всегда хешируйте пароли в своей базе данных. Но давайте проигнорируем это для этого простого примера. Идите вперед, создайте функцию декоратора validatePassword и устраните все ошибки Typescript.
Код
Вот стартовый код для упражнения:
Решение
Вот код решения для упражнения:
Последние мысли
Надеюсь, вам понравилось читать эту статью. Я всегда рад ответить на вопросы и открыт для критики. Не стесняйтесь обращаться ко мне в любое время! Свяжитесь со мной через LinkedIn,подпишитесь на меня вTwitter или подпишитесь, чтобы получать мои истории по электронной почте.
Вот ссылка для неограниченного доступа ко всему контенту здесь, на Medium. Если вы зарегистрируетесь по этой ссылке, я заработаю небольшую сумму без каких-либо дополнительных затрат для вас.
об авторе
Я аналитик по разработке программного обеспечения в Accenture Song. Мы всегда ищем лучших разработчиков, поэтому не стесняйтесь обращаться к нам, если вы заинтересованы в том, чтобы присоединиться к нам!
Что меня больше всего движет, так это мое стремление создать что-то, что потенциально может быть полезным и изменить жизнь для других 🙌 Например, вы устали просматривать свою историю, чтобы найти информацию, которую вы видели несколько дней назад? Мое расширение Web Highlights для Chrome поможет вам и повысит вашу продуктивность, организовав ваши исследования структурированным и эффективным способом. Как и в книгах и статьях, выделяйте текст на любой веб-странице или в PDF-файле. Ваши основные моменты синхронизируются непосредственно с веб-приложением на web-highlights.com, где вы можете найти их где угодно.
Дальнейшее чтение
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.
