Vue 및 TypeScript 클래스 데코레이터 구문과 함께 외부에서 정의된 구성 요소 사용

Vue 및 TypeScript 클래스 데코레이터 구문과 함께 외부에서 정의된 구성 요소 사용

에 의해 활성화된 TypeScript 데코레이터 구문을 사용하여 Vue 컴포넌트에서 사용하려고 합니다.

여기 제 것이 있습니다..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'?

그 이유는 아마FormWizardVue를 확장하거나 구현하지 않습니다.하지만 컴포넌트를 캐스팅하거나 TypeScript를 강제로 실행하도록 하는 방법을 알 수 없습니다.FormWizardVue 컴포넌트입니다.

에 대한 오타가 있을 수 있습니까?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
}

그렇다면 어떻게 하면 고칠 수 있을까요?

의 유형 정의vue-form-wizard는 이 문제를 해결하기 위해 업데이트되었지만 출시되지 않았습니다.다음 명령을 사용하여 변경을 포함한 GitHub 커밋을 수동으로 설치할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/56483290/using-externally-defined-component-with-vue-and-typescript-class-decorator-synta