Typescript support for polymer v3

Question

I am currently testing polymer 3 preview to see how to integrate it into our team workflow.

The recommended way to declare an element in v3 is:

import { PolymerElement } from '@polymer/polymer/polymer-element.js';
...
class MyElement extends PolymerElement {
  ...
}

See: https://www.polymer-project.org/blog/2018-03-23-polymer-3-latest-preview.html

This works well with typescript for basic things, but it does not understand that the class MyElement extends HTMLElement. So if I try to use this.dispatchEvent(...) in my code, the compilation will fail.

I tried to set a .d.ts to try to teach typescript but I could not get it to work. All those were pretty much unsuccessful.

1) Direct typing:

class PolymerElement extends HTMLElement{}

2) Typing the module:

declare module "polymer-element" {
    export class PolymerElement extends HTMLElement {}
}

And a few more variations but it never seem to be picked out by the transpiler. Any idas ?

Answer 1

As of version 3.0.5, TypeScript declarations are included in the @polymer/polymer NPM package itself, and for all of the iron-, paper- etc. elements as of version 3.0.0.

import {PolymerElement, html} from '@polymer/polymer';

class MyElement extends PolymerElement {
  static get template() {
    return html`<p>Hello [[who]]</p>`;
  }
  static get properties() {
    return {
      who: String,
    };
  }
  who = 'World';
}
customElements.define('my-element', MyElement);

You can also uses the @polymer/decorators package to get better type safety and a more convenient syntax:

import {PolymerElement, html} from '@polymer/polymer';
import {customElement, property} from '@polymer/decorators';

@customElement('my-element')
class MyElement extends PolymerElement {
  static get template() {
    return html`<p>Hello [[who]]</p>`;
  }
  @property({type: String})
  who = 'World';
}

Answer 2

I'm pretty sure you had to declare the module as "@polymer/polymer/polymer-element" instead of just "polymer-element", unless you added the typings directly to the path @polymer/polymer in your node_modules.

Also, I'm not sure you're supposed to import polymer-element.js rather import polymer-element. The .js extension might interrupt adding the typings.