I've been diving into TypeScript by working on TS-based Lit Elements and refactoring a small project of mine.
However, I'm starting to feel frustrated because I can't seem to figure out what's wrong with this code. Even though it's as simple as a HelloWorld example, I keep getting errors:
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
@customElement('student-ids')
export class StudentIds extends LitElement {
@property()
name = 'Somebody';
render() {
return html`
<h1>Classroom Ids</h1>
<p>Hello, ${this.name}!</p>
`;
}
}
When I check in Chrome, I see the error:
Uncaught (in promise) Error: The following properties on element student-ids will not trigger updates
as expected because they are set using class fields: name. Native class fields and some compiled output
will overwrite accessors used for detecting changes.
See https://lit.dev/msg/class-field-shadowing for more information.
at StudentIds.performUpdate (reactive-element.ts:1302:17)
at StudentIds.scheduleUpdate (reactive-element.ts:1261:17)
at StudentIds.__enqueueUpdate (reactive-element.ts:1233:25)
After looking into the problems my IDE is flagging, it seems like my project might be missing some packages or settings needed to address this issue. The IDE is showing errors specifically at the decorators:
@customElement():
Unable to resolve signature of class decorator when called as an expression. The runtime will invoke the decorator with 2 arguments, but the decorator expects 1.ts(1238)@property():
Unable to resolve signature of property decorator when called as an expression. Argument of type 'undefined' is not assignable to parameter of type 'Object | ClassElement'.ts(1240)
Does anyone have any suggestions on what changes I should make to resolve this issue?