使用带有 Vue 和 TypeScript 类装饰器语法的外部定义组件

Posted 2023-02-23

【中文标题】使用带有 Vue 和 TypeScript 类装饰器语法的外部定义组件

【英文标题】：Using externally defined component with Vue and TypeScript class decorator syntax

【发布时间】：2019-10-22 07:26:27

【问题描述】：

我正在尝试使用 vue-class-component 启用的 TypeScript 装饰器语法在 Vue 组件中使用 vue-form-wizard。

这是我的.vue 文件：

<template>
    <form-wizard>
        <tab-content title="Personal details">
            My first tab content
        </tab-content>
        <tab-content title="Additional Info">
            My second tab content
        </tab-content>
        <tab-content title="Last step">
            Yuhuuu! This seems pretty damn simple
        </tab-content>
    </form-wizard>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from "vue-class-component";
import  FormWizard, TabContent from "vue-form-wizard";

@Component(
    components: 
        FormWizard, TabContent
    
)
export default class AdvisorWizard extends Vue 

</script>

这是 TypeScript 生成的错误：

Argument of type ' components:  FormWizard: typeof FormWizard; TabContent: typeof TabContent; ; ' is not assignable to parameter of type 'VueClass<Vue>'.
Object literal may only specify known properties, but 'components' does not exist in type 'VueClass<Vue>'. Did you mean to write 'component'?

我很确定这是因为 FormWizard 没有扩展或以其他方式实现 Vue。但我不知道如何强制转换组件或强制 TypeScript 相信 FormWizard 是一个 Vue 组件。

FormWizard 的输入可能是错误的吗？

export type ShapeType = 'circle' | 'square' | 'tab'
export type LayoutType = 'vertical' | 'horizontal'
export type StepSizeType = 'xs' | 'sm' | 'md' | 'lg'

export declare class Wizard 
  /** Wizard title */
  title: string
  /** Wizard subtitle */
  subtitle: string
  nextButtonText: string
  backButtonText: string
  finishButtonText: string
  /** Whether to hide footer buttons */
  hideButtons: boolean
  /** Whether to trigger beforeChange function when navigating back */
  validateOnBack: boolean
  /** Active step and button color */
  color: string
  /** Step color when the current step is not valid */
  errorColor: string
  /** Main step shape */
  shape: ShapeType
  /** Wizard layout */
  layout: LayoutType
  /** Additional css classes for steps */
  stepsClasses: string[]
  /** Step size */
  stepSize: StepSizeType
  /** Step transition from inactive to active */
  transition: string
  /** Tab index where the wizard should start */
  startIndex: number

如果是这样，我该怎么做才能解决它？

【参考方案1】：

vue-form-wizard 中的类型定义为 updated to address this problem，但从未发布。您可以使用以下命令手动安装包含更改的 GitHub 提交：

npm i -S git://github.com/BinarCode/vue-form-wizard#c686975

【讨论】：

谢谢 - 这看起来正是我想要的。我能够安装您指向的 vue-form-wizard 版本并通读类型声明和导出，它确实看起来像 FormWizard 和 TabContent 扩展了 Vue。但我仍然得到完全相同的错误。对我还能做什么有什么想法吗？

@DavidWGray 嗯。你有 GitHub 链接我可以查看以重现问题吗？

我的立场是正确的。这确实有效。显然，有些东西被不恰当地缓存了。我复制了我的项目以创建一个最小的可重现案例以上传到 github，在 vscode 中打开它并且错误消失了。然后我只是尝试在原始项目上重新加载 vscode 并且在那里工作。所以我准备好了。感谢您的帮助！

@DavidWGray 没问题 :)