Lit v2 中用户定义 types/objects 为属性的打字稿数组

Question

我想将我现有的 Javascript CustomElements/WebComponents（使用 Lit v1 制作并移植到 v2）转换为 TypeScript。

示例：

export class MyElement extends LitElement {
  ...
  @property({type: String})
  name = 'World';
  ...
}

...或另一个：https://github.com/lit/lit-element-starter-ts/blob/main/src/my-element.ts#L37

如何将属性定义为自定义打字稿类的数组？

例如像这样：

export class MyElement extends LitElement {
  ...
  @property({type: Array<MyCustomClass>})
  customClassArray = [];
  // or: customClassArray = [new MyCustomClass("foo")]; 
  ...
}

Answer 1

Lit 的 @property 装饰器是关于设置反应式属性并将属性反映到值（反之亦然，如果你打开 reflect: true）。但是，HTML 元素的这种转换对于非字符串值来说很棘手，例如数字应解析为实际数字，对于布尔值，属性的存在意味着 true 等

这就是 Lit 需要 type 的原因，以便能够为属性值选择正确的转换器。将其视为关于 attribute/value 转换的类型提示或转换器类型。看一眼 Lit's default converter.

您的实际类型应在 TypeScript 中定义。

export class YourElement extends LitElement {
  @property({ type: Array })
  customClassArray = new Array<YourCustomClass>();
  // or: customClassArray = [new YourCustomClass()];
}

Answer 2

我想我自己找到了一个解决方案，与@arshia11d 的答案非常相似。

import { MyCustomClass } from './MyCustomClass';    

export class MyElement extends LitElement {
      @property({ type: Array }) //Array<MyCustomClass> throws ts(2303) error
      annotations: MyCustomClass[] = [];
    }

类型定义：

export interface IMyCustomClass {
  label: string;
}

export class MyCustomClass implements IMyCustomClass {
  label: string;

  constructor(
    _label: string
  ) {
    this.label = _label;
  }
}

Lit v2 中用户定义 types/objects 为属性的打字稿数组

Array of typescript user-defined types/objects as property in Lit v2

typescript

lit-element

lit

Lit v2 中用户定义 types/objects 为 属性 的打字稿数组

Array of typescript user-defined types/objects as property in Lit v2

typescript

lit-element

lit

Lit v2 中用户定义 types/objects 为属性的打字稿数组