PolymerTS icon indicating copy to clipboard operation
PolymerTS copied to clipboard

Behavior properties - eg animationConfig and keyBindings

Open nalbion opened this issue 9 years ago • 7 comments

Is there any trick to using Behavior properties such as animationConfig and keyBindings?

nalbion avatar Jan 14 '16 10:01 nalbion

By the way, I've created a Babel plugin which converts standard JavaScript Polymer 1.x projects into PolymerTS format - https://github.com/nalbion/babel-plugin-polymer-to-typescript

nalbion avatar Jan 14 '16 11:01 nalbion

This should work, right?

/// <reference path="../../../bower_components/polymer-ts/polymer-ts.d.ts"/>
/// <reference path="../../../typings/polymer/paper/PaperRippleBehavior.d.ts"/>

@component('ts-element')
@behavior('Polymer.PaperRippleBehavior')
class TsElement extends polymer.Base implements Polymer.PaperRippleBehavior
{
  //...
}

I get the following error:

error TS2420: Class 'TsElement' incorrectly implements interface 'PaperRippleBehavior'.
  Property 'ensureRipple' is missing in type 'TsElement'.

nalbion avatar Feb 04 '16 03:02 nalbion

I've figured it out - please add an example in the README

/// <reference path="../../../bower_components/polymer-ts/polymer-ts.d.ts"/>
/// <reference path="../../../typings/polymer/paper/PaperRippleBehavior.d.ts"/>

@component('ts-element')
@behavior(Polymer['PaperRippleBehavior'])
class TsElement extends polymer.Base implements Polymer.PaperRippleBehavior
{
   // ...
  handleClick(e:Event)
   {
      this.greet = "Holà";      
      this.fire("greet-event");
      this.ensureRipple(e);
   }

   // stand-in properties for behavior mixins 
   noink: boolean = false;
   ensureRipple: (optTriggeringEvent?: Event) => void;
   getRipple: () => paper.PaperRipple;
   hasRipple: () => boolean;
}

nalbion avatar Feb 04 '16 04:02 nalbion

added in readme.md

nippur72 avatar Feb 04 '16 15:02 nippur72

Another note that would be worth adding to the README - this doesn't seem to work in polymer-ts:

keyBindings: {
  'left': '_leftKey',
  'right': '_rightKey',
  'esc': '_escKey'
};

As per https://www.polymer-project.org/1.0/articles/es6.html, converting to a get method seems to fix it:

get keyBindings() {
    return {
        'left': '_leftKey',
        'right': '_rightKey',
        'esc': '_escKey'
    };
}

nalbion avatar Mar 09 '16 12:03 nalbion

Is there any way to implement a behavior without having to provide "stand-in properties for behavior mixins". Clearly it works at runtime, but the TS compiler doesn't work without adding the stand-in properties...

kito99 avatar Aug 30 '16 18:08 kito99

@nalbion I was going add this to the README since I'm creating a new release, but I don't quite follow what you're asking. Is keyBindings a property in a behavior or just a new property in your class?

kito99 avatar Nov 27 '17 17:11 kito99