打字机支持聚合物v3

Question

我目前正在测试聚合物3预览,以了解如何将其集成到我们的团队工作流程中.

在v3中声明元素的推荐方法是:

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

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

这适用于基本事物的typescript,但它不理解MyElement类扩展HTMLElement.因此,如果我尝试在我的代码中使用this.dispatchEvent(...),编译将失败.

我试图设置.d.ts尝试教打字稿但我无法让它工作.所有这些都是不成功的.

1)直接打字:

class PolymerElement extends HTMLElement{}

2)键入模块:

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

还有一些变化,但它似乎永远不会被转换器挑选出来.任何idas？

Answer 1

由于3.0.5版本,打字稿声明都包含在@polymer/polymerNPM包本身,并用于所有的iron-,paper-等等元素作为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);

您还可以使用该@polymer/decorators包来获得更好的类型安全性和更方便的语法:

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';
}