Lit TypeScript 装饰器问题

Question

我尝试通过编写基于 TS 的 Lit Elements 来进入 TypeScript，重构我的一个非常小的项目。

然而，它开始变得令人沮丧，因为我看不出这段代码有什么问题，因为它已简化为几乎与 HelloWorld 示例相同，但仍然给出错误：

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>
    `;
  }
}

在 Chrome 中我收到错误：

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)

看看我的 IDE 看到的问题，我的印象是我的项目缺少一些包或设置来解决这个问题，因为在 IDE 中我看到装饰器出现错误：

• @自定义元素（）：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)

• @财产（）：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)

有什么提示可以改变什么来解决这个问题吗？

Answer 1

Lit 3.0 的更新答案

\n

之前的答案仍然有效，但是从 Lit 3.0 开始，添加了标准装饰器支持。确保您使用的是 TypeScript \xe2\x89\xa5 5.2

\n

这意味着如果您使用的是 Lit 版本 3 或更高版本，您现在可以将experimentalDecorators和设置useDefineForClassFields为其默认值。

\n

这将要求您使用标准装饰器并添加accessor关键字。对于上面的示例，您所需要的只是accessor：

\n

  @property()\n  accessor name = \'Somebody\';\n

\n

如果您想了解有关从实验装饰器迁移到标准装饰器的更多详细信息，可以查看升级指南：https ://lit.dev/docs/v3/releases/upgrade/#standard-decorator-migration

\n

先前的答案（针对 Lit 2 和 Lit 3）：

\n

在 Lit 中使用装饰器时，请确保遵循此处的指导： https: //lit.dev/docs/components/decorators/#decorators-typescript

\n

在您的 TypeScript 中tsconfig.json，确保设置experimentalDecorators为true和useDefineForClassFieldsto false。

\n