Typescript-stöd för Polymer v3

Jag testar för närvarande Polymer 3-preview för att se hur det kan integreras i vårt teamarbetsflöde.

Det rekommenderade sättet att deklarera ett element i v3 är:

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

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

Detta fungerar bra med TypeScript för grundläggande saker, men det förstår inte att klassen MyElement utökar HTMLElement. Så om jag försöker använda this.dispatchEvent(...) i min kod, kommer kompileringen att misslyckas.

Jag försökte sätta en .d.ts för att försöka lära TypeScript men jag kunde inte få det att fungera. Alla de försöken var i princip misslyckade.

1) Direkt skrivning:

class PolymerElement extends HTMLElement{}

2) Skriva modulen:

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

Och några fler variationer men det verkar aldrig bli utvalda av transpileraren. Några idéer?

Svar #1

Från och med version 3.0.5 ingår TypeScript-deklarationer i själva @polymer/polymer NPM-paketet, och för alla iron-, paper- etc. element från och med 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);

Du kan också använda paketet @polymer/decorators för att få bättre typkontroll och en mer bekväm 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';
}

Svar #2

Jag är ganska säker på att du var tvungen att deklarera modulen som "@polymer/polymer/polymer-element" istället för bara "polymer-element", om du inte lade till typdefinitionerna direkt till sökvägen @polymer/polymer i din node_modules.

Jag är inte heller säker på att du ska importera polymer-element.js, utan importera polymer-element. .js-tillägget kan störa tillägget av typdefinitionerna.

Relaterade artiklar