Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeScript: LitElement.render returns TemplateResult | void #874

Closed
mgenware opened this issue Jan 11, 2020 · 4 comments
Closed

TypeScript: LitElement.render returns TemplateResult | void #874

mgenware opened this issue Jan 11, 2020 · 4 comments

Comments

@mgenware
Copy link

Description

LitElement.render returnsTemplateResult|void, which makes it look less type safe for typescript users.

Source code of lit-element.ts:

  /**
   * Invoked on each update to perform rendering tasks. This method must return
   * a lit-html TemplateResult. Setting properties inside this method will *not*
   * trigger the element to update.
   */
  protected render(): TemplateResult|void {
  }

Wondering if it's possible to make it an abstract function with only TemplateResult as return type,

Steps to Reproduce

render() {
  if (this.prop) {
    return html`<p></p>`;
  }
}

Expected Results

TypeScript compile error.

Actual Results

Compiles fine on strict mode.

Versions

  • lit-element: v2.2.1
@chase-moskal
Copy link

does it make sense in some cases, for a component to return null or undefined, to indicate that nothing should be rendered?

@CaptainCodeman
Copy link

CaptainCodeman commented Jan 11, 2020

There's already a shouldUpdate method that can prevent rendering

@mgenware
Copy link
Author

lit-element docs says:

render Returns | TemplateResult | Must return a lit-html TemplateResult.

lit-html docs says:

The DOM is inconsistent in some cases with its behavior towards undefined & null. Using an empty string ('') is the most consistent.

From my experience with TypeScript, returning an empty string resulted in compile error:

Type '() => TemplateResult | ""' is not assignable to type '() => void | TemplateResult'.

And not returning anything (equal to returning undefined in JS) results in bugs where property changes don't trigger a re-render.

I usually do this to return an empty thing, and it works:

return html``;

@justinfagnani
Copy link
Contributor

render() can really return any type of value. We've had a bug around that though, but it was just fixed in #712. That updates the return type too. We'll have with this woon.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants