Я создал небольшой компонент:
import Vue from 'vue';
import Component from 'vue-class-component';
import { Inject, Model, Prop, Watch } from 'vue-property-decorator';
@Component({
template: require('./home.html'),
})
export class HomeComponent extends Vue {
name: string = 'User';
}
я могу скомпилировать проект без проблем, используя [email protected]
Но если я попытаюсь использовать [email protected], я получу следующие ошибки:
ОШИБКА в [загрузчике] ./src/components/home/home.ts:8:2
TS2345: Argument of type 'typeof HomeComponent' is not assignable to parameter of type 'VueClass<Vue>'.
Type 'typeof HomeComponent' is not assignable to type 'new (...args: any[]) => Vue'.
Type 'HomeComponent' is not assignable to type 'Vue'.
Types of property '$options' are incompatible.
Type 'ComponentOptions<HomeComponent, DefaultData<HomeComponent>,
DefaultMethods<HomeComponent>, Defaul...' is not assignable to type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Rec...'.
Type 'HomeComponent' is not assignable to type 'Vue'.
Я понимаю, что проблема в этих трех строках кода:
@Component({
template: require('./home.html'),
})
Я пробовал заменить таким образом:
@Component
но я получил ошибку:
ERROR in [at-loader] ./src/components/home/home.ts:7:1
TS1238: Unable to resolve signature of class decorator when called as an expression.
Type '<VC extends VueClass<Vue>>(target: VC) => VC' is not assignable to type 'typeof HomeComponent'.
Property 'extend' is missing in type '<VC extends VueClass<Vue>>(target: VC) => VC'.
Поэтому я попытался полностью удалить 3 строки @Component
Очевидно, код был скомпилирован
[at-loader] Хорошо, 0,97 сек.
но тогда программа не может работать
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
<Root>
Как использовать vue js @Component с typescript 2.6.1?