Question

尝试使用Lit-Element查询装饰器时，代码使Typescript编译失败。

使用tsconfig.json

{
  "compilerOptions": {
    "target": "es2017",
    "module": "es2015",
    "moduleResolution": "node",
    "lib": ["es2017", "dom"],
    "outDir": "../../out/client",
    "allowJs": true,
    "experimentalDecorators": true
  }
}

和package.json

  "dependencies": {
    "lit-element": "^2.2.1"
  },

tsc命令产生以下错误：

作为表达式调用时，无法解析属性装饰器的签名。           输入'{kind：string;位置：字符串；关键：任何；描述符：任何； }”不能分配给“ void”类型。

但是，如果我注释掉装饰器的两行，并取消注释等效的get函数，则不会出错。


    @customElement("my-app")
    export default class extends LitElement {
      @query("p")
      p: any;

      // get p() {
      //   return this.shadowRoot.querySelector("p");
      // }

      render() {
        return html`
          Hello World!
          <p>A paragraph</p>
        `;
      }

我期望使用查询修饰的属性或属性getter的行为相同。

Answer 1

您是否正确导入query批注？

以下元素对我有用：

/**
 * Import LitElement base class, html helper function,
 * and TypeScript decorators
 **/
import {
    LitElement, html, customElement, query
  } from 'lit-element';

  @customElement("my-app")
  export default class extends LitElement {
    @query("p")
    p: any;

    // get p() {
    //   return this.shadowRoot.querySelector("p");
    // }

    render() {
      return html`
        Hello World!
        <p>A paragraph</p>
      `;
    }
}

使用tsconfig.json：

{
    "compilerOptions": {
        "moduleResolution": "node",
        "module": "es6",
        "target": "es6",
        "experimentalDecorators": true 
    }
}

如何使用Lit-Element查询装饰器？

1 个答案: