polymer2-ts -DEPRECATED

2-14-2018: With the recent annoucement of OFFICIAL support for Polymer Decorators and type definitions, we have decided to deprecate this project. Thanks to everyone for the contributions and support.

---

To install use: bower install --save polymer2-ts

Overview

Typescript decorators and type definitions for Polymer 2.0.

Available Behaviors

@customElement()

This class decorator will automatically add the is() getter and register your element.

@customElement("my-element")
class MyElement extends Polymer.Element {

}

@property(options?: PropertyOptions)

This property decorator will register your properties for you. Do not declare a properties getter. The type is inferred by the type declared in TypeScript. Assign defaults to the property directly.

class MyElement extends Polymer.Element {

    @property({ reflectToAttribute: true, notify: true })
    shape: string = "circle";
    
    @property()
    size: number = 60;    
}

Available PropertyOptions:

    notify?: boolean;
    reflectToAttribute?: boolean;
    readOnly?: boolean;

@listen(eventName: string, targetElem?: string)

This function decorator adds an event listener for the provided event name and calls back the function when the event is fired.

TypeScript:

class MyElement extends Polymer.Element {

 //Listen for tap events on the element with an id="submitButton"
  @listen("tap", "submitButton")
  submitButtonTapHandler(e){
      doSomething();
  }
  
  //Listen for all tap events on MyElement
  @listen("tap")
  tapHandler(e){
      doSomething();
  }
}

HTML:

<paper-button id="submitButton">Submit</paper-button>

@gestureListen(eventName: string, targetElem?: string)

This function decorator adds an polymer gesture listener for the provided event name and calls back the function when the event is fired.

IMPORTANT: When using this decorator your class must apply the gesture mix-in.

<link rel="import" href="polymer/lib/mixins/gesture-event-listeners.html">

<script>
    class TestEvent extends Polymer.GestureEventListeners(Polymer.Element) {
      ...
</script>

TypeScript:

class MyElement extends Polymer.Element {

 //Listen for tap events on the element with an id="submitButton"
  @listen("tap", "submitButton")
  submitButtonTapHandler(e){
      doSomething();
  }
  
  //Listen for all tap events on MyElement
  @listen("tap")
  tapHandler(e){
      doSomething();
  }
}

HTML:

<paper-button id="submitButton">Submit</paper-button>

computed(name: string)

This function decorator registers a computed property with the provided name. When one or more associated properties change, the computed property is updated.

TypeScript:
class MyElement extends Polymer.Element {
  @property( )
  numOne: number = 1;
    
  @property( )
  numTwo: number = 2;
        
  @computed('total')
  getSrc(numOne: number, numTwo: number) : number {
    return numOne + numTwo;
  }
}

HTML:

<h1>[[total]]</h1>

Result:

<h1>3</h1>

Recommended TypeScript Config

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es2015",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "strictNullChecks": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "sourceMap": false,
    "lib": ["es2017", "dom"],
    "typeRoots": ["types"]
  },
  "exclude": [    
    "node_modules",
    "bower_components/reflect-metadata/"
  ]
}

Example

my-element.ts

@customElement("my-element")
class MyElement extends Polymer.Element {

    @property({ notify: true })
    personId: number = 44;

    @property()
    size: number = 60;

    @observe('size')
    _sizeChanged(size) {
        console.log("size changed to " + size);
    }
    
    @computed('src')
    _computePictureSrc(personId: number, size: number) {
        var baseUrl = this.isDev() ? "https://dev.example.com/" : "https://example.com/";
        return `${baseUrl}Picture(${personId})/Default.Picture(size=${size})`;
    }
}

my-element.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../polymer2-ts/polymer2-ts.html">

<dom-module id="my-element">
    <template>
        <style>
             :host {
                display: block;
            }            
        </style>
        <img src="{{src}}" style="height:[[size]]"></img>
    </template>
    <script type="text/javascript" src="my-element.js"></script>
</dom-module>