Working with types

Declarative approach to components require no types at all, but sometimes we need types for accessing component methods or using mixins or behaviors. We can use type any, but this isn't really the best thing to do. Instead, we can ask "Ms Potts" to help us :). Potts (Polymer To TypeScript) is a types generator designed specifically for TWC (but can be used with different projects as well). It reads dependencies listed in bower.json and generate types for their main files (files listed in main section of bower.json).

Generating types

But lets cut the chatter and get to code! First, install potts globally npm install potts -g or locally npm install potts --save-dev. Now, consider the following bower.json:

{
  "name": "my-project",
  "main": "my-component.html",
  "dependencies": {
    "polymer": "^2.0.0",
    "paper-button": "^2.0.0",
    "paper-behaviors": "^2.0.0"
  }
}

We have 3 dependencies: polymer, paper-button and paper-behavior. Their main files are:

• polymer/polymer.html
• paper-button/paper-button.html
• paper-behaviors/paper-button-behavior.html
• paper-behaviors/paper-checked-element-behavior.html
• paper-behaviors/paper-inky-focus-behavior.html

Polymer core types are provided with the twc, so we skip them. Running potts will output 4 modules:

• declare module "bower:paper-button/paper-button.html" { ... }
• declare module "bower:paper-behaviors/paper-button-behavior.html" { ... }
• declare module "bower:paper-behaviors/paper-checked-element-behavior.html" { ... }
• declare module "bower:paper-behaviors/paper-inky-focus-behavior.html" { ... }

Those declarations will by default be saved in potts.d.ts file in the root of your project. All you need to do now is to add that file to include section of tsconfig.json file.

Using generated types

Now lets use those types. Say we have <paper-button id="button">...</paper-button> in our component and we use a paper-checked-element-behavior. First, we need to import those into our component:

import { PaperButton } from "bower:paper-button/paper-button.html";
import { PaperCheckedElementBehavior } from "bower:paper-behaviors/paper-checked-element-behavior.html";

This will add proper <link rel="import"> for each import. Now lets see if a button currently contains a ripple effect:

const button = this.$.button as PaperButton;
if (button.hasRipple()) {
  ...
}

It works ;). But now, how to use behaviors? Just use Polymer.mixinBehaviors:

@CustomElement()
export class MyComponent extends Polymer.mixinBehaviors([ PaperCheckedElementBehavior ], Polymer.Element) {
  constructor() {
    super();
    this.checked = true;
  }
}

Automation

So far, you will need to run potts manually every time you install a bower component. It might be tiresome, but luckily bower, as every proper repository system, has hooks. We just need one of them: postinstall. Edit (or create) .bowerrc file in the root of your project and scripts section:

{
  "scripts": {
    "postinstall": "potts"
  }
}

Please note. Command potts will work if you have it installed globally. For convenience, consider adding npm script and running it instead, so it works for potts installed locally as well.

That's it! You are all set up and ready to go.