如何为打字稿vue类使用构造函数选项？

Question

给出以下代码段

给出编译错误

ERROR in C:/dev/AscendXYZ/Ascend.Wammo.RadarIngestor/apps/Ascend.Wammo.Dashboard/src/components/BirdControlMap.tsx
32:1 Unable to resolve signature of class decorator when called as an expression.
  Type '<VC extends VueClass<Vue>>(target: VC) => VC' is missing the following properties from type 'typeof MapLayout': extend, nextTick, set, delete, and 9 more.
    30 | }
    31 |
  > 32 | @Component
       | ^
    33 | export default class MapLayout extends Vue {
    34 |
    35 |     constructor(options: MapLayoutOptions) {

有什么方法可以在vue / typescript中使用构造函数选项吗？这样我可以在我的jsx标记上获得智能感知？

Answer 1

这是一种解决方法。

interface MapLayoutOptions{
    subscriberId: string;
    radarId: string;
    zoneGroupId: string;
    interval: number;
    apiEndpoint: string;
}

export abstract class TsxComponent<P> extends Vue {
    private vueTsxProps!: Readonly<{}> & Readonly<P>;
}

declare global {
    namespace JSX {
        interface ElementAttributesProperty { vueTsxProps: {}; }
    }
}

@Component
export default class MapLayout extends TsxComponent<MapLayoutOptions> {
}

类型检查可确保实现接口属性并为tsx元素提供智能感知。