打字机支持聚合物v3

Posted 2021-04-12

我目前正在测试聚合物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？

答案

我很确定你必须将模块声明为"@polymer/polymer/polymer-element"而不仅仅是"polymer-element"，除非你直接在你的@polymer/polymer中添加了路径node_modules。

此外，我不确定你应该导入polymer-element.js而不是导入polymer-element。 .js扩展可能会中断添加打字。

另一答案

从版本3.0.5开始，TypeScript声明包含在@polymer/polymer NPM包本身中，以及版本3.0.0中所有iron-，paper-等元素中。

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

另一答案

似乎v3还不支持TypeScript类型。

你可以在v3.x branch中看到一个名为Delete typings for now.的提交。

解决方案：

1.只是对TypeScript说不关心：

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

2.你的元素可以声明直接从qazxsw poi扩展：

HTMLElement