5.6.8.1. Создание компонентов Polymer на TypeScript

С декораторами TypeScript от Polymer создание классов компонентов стало удобнее, а код компактнее. Рассмотрим декораторы на следующем примере:

/// <reference path="../bower_components/cuba-app/cuba-app.d.ts" />
/// <reference path="../bower_components/app-layout/app-drawer/app-drawer.d.ts" />
/// <reference path="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.d.ts" />

namespace myapp {

  // Create shortcuts to decorators
  const {customElement, property, observe, query} = Polymer.decorators;

  @customElement('myapp-component')
  class MyappComponent extends (Polymer.mixinBehaviors([CubaAppAwareBehavior, CubaLocalizeBehavior], Polymer.Element) as
    new () => Polymer.Element & CubaAppAwareBehavior & CubaLocalizeBehavior) {

    @property({type: Boolean})
    enabled: boolean;

    @property({type: String})
    caption: string;

    @query('#drawer')
    drawer: AppDrawerElement;

    @observe('app')
    _init(app: cuba.CubaApp) {
      ...
    }

    @computed('enabled', 'caption')
    get enabledCaption() {
      ...
    }
  }
}

  • /// <reference path="…​"/> - позволяет импортировать декларации TypeScript из других элементов или библиотек.

  • @customElements('element-name') - этот декоратор избавляет от необходимости опрелелять метод static get is() и вручную вызывать customElements.define().

  • @property() - позволяет задавать свойства компонента.

  • @query('.css-selector') - позволяет выбирать DOM-элементы компонента.

  • @observe('propertyName') - позволяет указать observer для данной property.

  • @computed() - позволяет задать computed-методы.

Больше примеров вы можете найти в репозитории polymer-decorators на GitHub.