Búsqueda de sitios web

¿Cómo hacer que TypeScript reconozca las propiedades creadas con el método "get properties()" en Lit-Element?


Al crear un Componente con LitElement podemos usar el decorador @property o el campo estático properties, como se describe en la documentación.

Me gustaría usar este segundo método con Typescript, pero da un error ya que el campo no existe en la clase.

export class MyClass extends LitElement {

  static get properties() { 
    return { 
      greeting: {type: String},
    };
  }

  public constructor() {
    super();
    this.greeting = "test"; // Error: Property 'greeting' does not exist on type 'MyClass'
  }
}

Typescript se queja de que la propiedad greeting no existe. ¿Cómo puedo hacer que Typescript reconozca las propiedades creadas con el método "get properties()" en Lit-Element?

¿Por qué?

Quiero poder evitar la repetición usando el operador spread. Algo así:

const obj = {/** Long object definition **/};

export class MyClass extends LitElement {

  static get properties() { 
    return {
      ...obj,
      greeting: {type: String},
    };
  }
}

Respuesta #1

No necesitas usar los decoradores, pero aún necesitas declarar la propiedad de la clase, como lo harías si no estuvieras usando Lit en absoluto. El getter properties no es un sustituto de la declaración de la propiedad de la clase, es solo otra forma de pasar la configuración/metadata de la propiedad a LitElement.

(Además, type en la configuración no es algo de TypeScript, solo le está diciendo a Lit qué convertidor de atributo predeterminado usar al mapear el atributo de tu elemento a una propiedad de clase.)

Puedes hacer esto:

export class MyClass extends LitElement {
  greeting: string;

  static get properties() { 
    return { 
      greeting: {type: String},
    };
  }

  public constructor() {
    super();
    this.greeting = "test";
  }
}

o en este caso puedes omitir el constructor por completo:

export class MyClass extends LitElement {
  greeting = "test";

  static get properties() { 
    return { 
      greeting: {type: String},
    };
  }
}

Artículos relacionados