[lit-plugin] no-incompatible-type-binding when types should be compatible

I’m using the lit-plugin in VSCode. I’m NOT using typescript, but instead, javascript with jsdoc type annotations.

It seems like when setting properties via the template binding, lit-plugin isn’t using the jsdoc annotation to determine the type, but rather the inferred type based on the value (or is it looking at the type in the static properties getter?):

Screen Shot 2020-04-29 at 12 00 43 PM

The type for this.context.states is picked up correct as string[] and the component I’m assigning the property on has this constructor:

constructor() {
    super();
    /** @type {Array<string>} */
    this.states = [];
    /** @type {string?} */
    this.selected = null;
  }

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:5 (1 by maintainers)

Top GitHub Comments

2reactions

jrunningcommented, May 14, 2021

Is there any update on this? I’m still seeing this issue in VSCode using lit-plugin 1.2.1.

2reactions

jrobinson01commented, May 20, 2020

Thanks! It seems like that version gets rid of my errors and such, but it’s still not correctly picking up the type from the jsdoc, but using the type from properties instead. Here’s an example:

import {LitElement, html} from 'lit-element';

class ChildElement extends LitElement {
  static get properties() {
    return {
      // type picked up from here
      things: {
        type: Array,
      }
    }
  }
  constructor() {
    super();
    // this has no effect
    /** @type {Array<boolean>} */
    this.things = [];
  }
}

customElements.define('child-element', ChildElement);

class MyElement extends LitElement {
  static get properties() {
    return {
      items: {
        type: Array,
      }
    };
  }

  constructor() {
    super();
    /** @type {Array<string>} */
    this.items = [];
  }

  render() {
    return html`
      <child-element .things=${this.items}></child-element>
    `;
  }
}

customElements.define('my-element', MyElement);

In this case, child-element should be expecting a type of Boolean[] for it’s things property, but it’s expecting any[]. If you make this change:

import {LitElement, html} from 'lit-element';

class ChildElement extends LitElement {
  static get properties() {
    return {
      things: {
        type: String,
      }
    }
  }
  constructor() {
    super();
    /** @type {Array<boolean>} */
    this.things = [];
  }
}

customElements.define('child-element', ChildElement);

class MyElement extends LitElement {
  static get properties() {
    return {
      items: {
        type: Array,
      }
    };
  }

  constructor() {
    super();
    /** @type {Array<string>} */
    this.items = [];
  }

  render() {
    return html`
      <child-element .things=${this.items}></child-element>
    `;
  }
}

customElements.define('my-element', MyElement);

changing the things.type property to String then the plugin is able to detect a problem here: <child-element .things=${this.items}></child-element> and complains that child-element.things should be a String instead of an String[].

Meanwhile, the jsdoc typecast in the constructor of child-element seeming has no effect.