Понимая Angular 2


В прошлом году команда разработчиков Angular2 анонсировала новый диалект (точнее даже расширение) язка Javascript, который назывался AtScript. Его фишка была в аннотациях, в первую очередь. Аннотации рассматривались как новый инструмент, который поможет делать разработку и отладку лучше и проще. Спустя полгода после этого на конференции ng-conf команда AtScript объявила о том, что они добавили поддержку новой фичи, которая называется “декораторы”.

Аннотации

AtScript имел синтаксис совместимый с TypeScript. Аннотации были добавлены для представления дополнительных типов данных, которые могут проверятся на стадии выполнения, а не только на стадии компиляции с помощью метаданных.

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

Для определения и записи таких метаданных было предложено использовать новый оператор — символ ‘@’.

@Component({
selector: 'foo',
template: 'bar'
})

Также в AtScript был предусмотрен Reflection API для определения типа объекта во время выполнения программы, а так же доступа к данным о типах. Таким образом, AtScript был хорощим расширением ES6, расширенный поддержкой типов, аннотаций и интроспекцией.

В AtScript была библиотека RTTS(RunTime Type System) — это небольшая библиотека для проверки типов на стадии выполнения скрипта (а не на стадии компиляции, как в TypeScript).

Проще говоря, аннотации — это альтернативный механизм для наследования и расширения объектов. Работая с Javascript мы уже привыкли к тому, что у нас есть механизм прототипного наследования. В любой момент можно расширить как класс, так и экземпляр объекта, созданного от класса. В ES6 появился синтаксис классического ООП стиля для описания классов и наследования. Не всегда нужен такой подход. Классическое ООП наследование имеет ряд ограничений и неудобств. Для решения проблемы множественного наследования в некоторых языках существуют такие структуры как Тейты (traits), которые предлставляют из себя не что иное, как примеси (mixins). Как альтернатива существуют шаблоны разработки Композиция и Декоратор.

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

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

Декораторы

Декораторы — это альтернатива для аннотаций, предложенная Yehuda Katz в стандарт ECMAScript 2016. Декораторы позволяют не только аннотировать метаданными объекты, но и модифицировать (декорировать) классы, методы и свойства.

TypeScript поддерживает Декораторы или Аннотации?

TypeScript поддерживает декораторы согласно стандарту и ничего не знает про аннотации Angular2. Тем не менее, механизм декораторов позволяет не только декорировать объекты, но и добавлять новые сущности к уже существующим, которые называют метаданными. Таким образом получаем, что Аннотации — это частный случай использования декораторов. Синтаскис и механизм декоратров позволяет реализовать аннотации, которые были задуманы командой AtScript.

Так как декоратор являются стандартом, а не особенностью языка TypeScript, то их можно использовать и в чистом ES7 коде с применением Babeljs. Но надо учитывать, что поведение декораторов в Babel и в TypeScript на сегодня (23 января 2016 года) отличается. Различия декораторов сильны при декорировании свойств и код декораторов на TypeScript и на Babel будет сильно различаться.