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

这适用于基本内容的打字稿，但它不理解类 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版开始，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';
}

Answer 2

似乎v3还不支持TypeScript打字。

您可以在标题为v3.x branch的Delete typings for now.中看到提交。

解决方案：

1.只是说TypeScript还没关心：

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

2.您的元素可以声明从HTMLElement扩展direclty：

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

Answer 3

我非常确定您必须将模块声明为"@polymer/polymer/polymer-element"而不仅仅是"polymer-element"，除非您将输入直接添加到{{1}中的路径@polymer/polymer }}

另外，我不确定您是否应该导入node_modules而是导入polymer-element.js。 polymer-element扩展程序可能会中断添加类型。

打字机支持聚合物v3

3 个答案: