4

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

4

3 回答 3

7

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

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';
}
于 2018-08-06T22:20:59.850 回答
2

v3 似乎还不支持 TypeScript 类型。

你现在可以在 v3.x 分支中看到一个名为Delete Typings的提交。.

解决方案：

1.对 TypeScript 说不要在意：

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

2.您的元素可以声明从以下位置扩展直接HTMLElement：

class MyElement extends PolymerElement, HTMLElement {
    fn() {
        this.dispatchEvent(...)
    }
}
于 2018-04-18T15:49:47.370 回答
2

我很确定您必须将模块声明为"@polymer/polymer/polymer-element"而不是 just "polymer-element"，除非您将类型直接添加@polymer/polymer到node_modules.

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

于 2018-04-20T23:01:55.693 回答