Как использовать декоратор запросов Lit-Element? - PullRequest
Новая
       13

Как использовать декоратор запросов Lit-Element?

1 голос
/ 06 ноября 2019

Сбой при компиляции Typescript при попытке использовать декоратор запросов Lit-Element.

С 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 выдает следующую ошибку:

Невозможно разрешить подпись декоратора свойства при вызове в качестве выражения. Тип '{вид: строка;размещение: строка;ключ: любой;дескриптор: любой;} 'нельзя присвоить типу' 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.

1 Ответ

0 голосов
/ 12 ноября 2019

Правильно ли вы импортируете аннотацию 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 
    }
}
...