2

我想将我现有的 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")]; 
  ...
}
4

2 回答 2

1

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

这就是为什么 Lit 需要type, 才能为属性值选择正确的转换器。将其视为关于属性/值转换的类型提示或转换器类型。看看 Lit 的默认转换器。

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

export class YourElement extends LitElement {
  @property({ type: Array })
  customClassArray = new Array<YourCustomClass>();
  // or: customClassArray = [new YourCustomClass()];
}
于 2022-01-06T12:44:15.300 回答
0

我想我自己找到了一个解决方案，与@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;
  }
}
于 2022-01-06T13:16:31.230 回答