Polymer v3 的打字稿支持

Question

我目前正在测试 polymer 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

对于基本的东西，这与打字稿配合得很好，但它不理解 class MyElement 扩展 HTMLElement。因此，如果我尝试在我的代码中使用 this.dispatchEvent(...)，编译将失败。

我尝试设置 .d.ts 来尝试教授打字稿，但我无法让它工作。所有这些都几乎没有成功。

1) 直接输入：

class PolymerElement extends HTMLElement{}

2) 输入模块：

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

还有一些变体，但它似乎从未被转译器挑选出来。有 idas 吗？

Answer 1

v3 似乎还不支持 TypeScript 类型

您可以在 v3.x branch titled Delete typings for now. 中看到一个提交。

解决方案：

1.Just 对 TypeScript 说还不关心：

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

2.Your 元素可以声明直接从 HTMLElement:

扩展

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

Answer 2

我很确定你必须将模块声明为 "@polymer/polymer/polymer-element" 而不是 "polymer-element"，除非你将类型直接添加到 [=13] 中的路径 @polymer/polymer =].

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

Answer 3

从 3.0.5 版开始，TypeScript 声明包含在 @polymer/polymer NPM 包本身中，对于所有 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';
}

Polymer v3 的打字稿支持

Typescript support for polymer v3

typescript

polymer

typescript-typings

polymer-3.x