3.7.2.7.1. 使用 TypeScript 创建 Polymer 组件

Polymer 团队通过 TypeScript 装饰器提供了更方便和简洁的创建组件类的途径。先看看下面这个例子：

  1. /// <reference path="../bower_components/cuba-app/cuba-app.d.ts" />
  2. /// <reference path="../bower_components/app-layout/app-drawer/app-drawer.d.ts" />
  3. /// <reference path="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.d.ts" />
  5. namespace myapp {
  7.   // Create shortcuts to decorators
  8.   const {customElement, property, observe, query} = Polymer.decorators;
  10.   @customElement('myapp-component')
  11.   class MyappComponent extends (Polymer.mixinBehaviors([CubaAppAwareBehavior, CubaLocalizeBehavior], Polymer.Element) as
  12.     new () => Polymer.Element & CubaAppAwareBehavior & CubaLocalizeBehavior) {
  14.     @property({type: Boolean})
  15.     enabled: boolean;
  17.     @property({type: String})
  18.     caption: string;
  20.     @query('#drawer')
  21.     drawer: AppDrawerElement;
  23.     @observe('app')
  24.     _init(app: cuba.CubaApp) {
  25.       ...
  26.     }
  28.     @computed('enabled', 'caption')
  29.     get enabledCaption() {
  30.       ...
  31.     }
  32.   }
  33. }

  • /// <reference path="…​"/> - 允许通过这种方式引入 TypeScript 中其它元素或者类库。

  • @customElements('element-name') 装饰器使得无需定义 static get is() 方法，并且无需手动调用 customElements.define()。

  • @property() 装饰器可以指定组件的属性。

  • @query('.css-selector') 装饰器可以给组件选择 DOM 元素。

  • @observe('propertyName') 装饰器可以定义属性观察者。

  • @computed() 装饰器可以定义计算方法。

参考 polymer-decorators github 仓库了解更多示例。