Support for Typescript in Polymer version 3

Question

Support for Typescript in Polymer version 3

Currently experimenting with Polymer 3 preview to explore how it can be integrated into our team workflow.

The recommended method for declaring an element in v3 is as follows:

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

For more information, visit: https://www.polymer-project.org/blog/2018-03-23-polymer-3-latest-preview.html

While this approach works smoothly with typescript for basic functionalities, it does not recognize that the class MyElement extends HTMLElement. As a result, attempting to use this.dispatchEvent(...) in the code will lead to compilation errors.

I attempted to create a .d.ts file to instruct typescript, but all attempts were unsuccessful.

1) Trying direct typing:

class PolymerElement extends HTMLElement{}

2) Typing the module:

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

Despite trying several variations, the transpiler does not seem to recognize any of them. Any suggestions?

typescript polymer typescript-typings polymer-3.x

Answer 1

Answer №1

Starting from version 3.0.5, TypeScript declarations are now included within the core @polymer/polymer NPM package itself. Additionally, TypeScript declarations are also available for elements such as iron-, paper-, and others starting from 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);

Furthermore, you have the option to utilize the @polymer/decorators package for enhanced type safety and a more streamlined 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

Starting from version 3.0.5, TypeScript declarations are now included within the core @polymer/polymer NPM package itself. Additionally, TypeScript declarations are also available for elements such as iron-, paper-, and others starting from 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);

Furthermore, you have the option to utilize the @polymer/decorators package for enhanced type safety and a more streamlined 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 3

Answer №2

It is important to declare the module as

"@polymer/polymer/polymer-element"

instead of just "polymer-element", unless you have included the typings directly in the path @polymer/polymer within your node_modules.

Furthermore, make sure to import polymer-element instead of polymer-element.js. Using the .js extension could cause issues with adding the typings properly.

Answer 4

It is important to declare the module as

"@polymer/polymer/polymer-element"

instead of just "polymer-element", unless you have included the typings directly in the path @polymer/polymer within your node_modules.

Furthermore, make sure to import polymer-element instead of polymer-element.js. Using the .js extension could cause issues with adding the typings properly.

Answer 5

Answer №3

At this moment, it appears that v3 does not yet fully support TypeScript typings.

You may notice a recent commit in the v3.x branch titled Delete typings for now..

Possible solutions:

1. Tell TypeScript to temporarily ignore the lack of typings:

class MyElement extends PolymerElement {
  fn(){
     (this as any).dispatchEvent(...) 
  }
}

2. Have your element explicitly extend from HTMLElement:

class MyElement extends PolymerElement, HTMLElement {
    fn() {
        this.dispatchEvent(...)
    }
}

Answer 6

At this moment, it appears that v3 does not yet fully support TypeScript typings.

You may notice a recent commit in the v3.x branch titled Delete typings for now..

Possible solutions:

1. Tell TypeScript to temporarily ignore the lack of typings:

class MyElement extends PolymerElement {
  fn(){
     (this as any).dispatchEvent(...) 
  }
}

2. Have your element explicitly extend from HTMLElement:

class MyElement extends PolymerElement, HTMLElement {
    fn() {
        this.dispatchEvent(...)
    }
}

Support for Typescript in Polymer version 3

Answer №1

Answer №2

Answer №3

Similar questions

How can I display options in a react autocomplete feature?

Ways to bypass browser pop-up blockers when using the window.open function

Implementing theme in Monaco editor without initializing an instance

Displaying user input data in a separate component post form submission within Angular

Heroku: Unable to retrieve resource - server returned a 404 (Not Found) status code

Setting up Storybook with Tailwindcss, ReactJS and Typescript: A comprehensive guide

Error encountered during conversion to Typescript for select event and default value

How to dynamically incorporate methods into a TypeScript class

Having trouble processing images in multi-file components with Vue and TypeScript

The @Input() function is failing to display or fetch the latest value that was passed

TypeScript incorporates a variety of @types versions for react

A mistake has occurred: Unhandled promise rejection TypeError: Unable to assign the property 'devices' to an undefined object in Ionic 4 with Angular

Having issues with Craco not recognizing alias configuration for TypeScript in Azure Pipeline webpack

What would be the optimal type for the second argument of the `simulate` method?

Issue with loading React Router custom props array but custom string works fine

Error encountered when attempting to assign a value of the original data type within the Array.reduce function

Is the variable empty outside of the subscribe block after it's been assigned?

Error encountered in Typescript when attempting to invoke axios - the call lacks a suitable overload

Attempting to leverage the combination of mocha, ES6 modules, and ts-node while utilizing the --experimental-loader option

Conceal a row in a table using knockout's style binding functionality