我在try 使用side组件(在项目目录之外)时遇到以下类型脚本错误:
TS2345: Argument of type '{ template: string; components: { SimpleCheckbox: typeof SimpleCheckbox; }; }'
is not assignable to parameter of type 'VueClass<Vue>'.
Object literal may only specify known properties, and 'template' does not exist in type
'VueClass<Vue>'.
我的WebStorm IDE没有检测到这个错误；当我用TypeScript loader运行Webpack时，在控制台中输出了.
错误发生在:
import { Vue, Component, Prop } from 'vue-property-decorator';
import template from './SkipProjectInitializationStepPanel.pug';
import SimpleCheckbox from './../../../../ui-kit-libary-in-development/UiComponents/Checkboxes/MaterialDesign/SimpleCheckbox.vue';
@Component({ template, components: { SimpleCheckbox } }) // here !
export default class SkipProjectInitializationStepPanel extends Vue {
@Prop({ type: String, required: true }) private readonly text!: string;
}
从ui-kit-libary-in-development name中可以看出，这还不是npm依赖项，所以目前还不在node_modules中.
这完全是打字错误；尽管ts-loader抛出了这个错误，但Webpack构建了我的项目，并且编译的JavaScript工作正常.如果执行以下操作之一，此错误将消失:
- 将
SimpleCheckbox.vue移动到与SkipProjectInitializationStepPanel.ts相同的目录，并将其作为import SimpleCheckbox from './SimpleCheckbox.vue';导入 - 从
@Component({ template, components: { SimpleCheckbox } })中移除SimpleCheckbox，只留下@Component({ template, components: {} })(当然，SimpleCheckbox在本例中不会被渲染，但它证明问题不在SkipProjectInitializationStepPanel中). - 将主项目的
ui-kit-libary-in-development移到node_modules，并从ui-kit-libary-in-development中移除node_modules(如果不移除，则不会有任何更改).
不幸的是，我无法重现这个问题.出于以下原因，try 复制作品时不会出现错误:
MainProject/src/Application.vue
<template lang="pug">
PageOne
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import PageOne from './PageComponents/PageOne'
@Component({ components: { PageOne }})
export default class Application extends Vue {
private created(): void {
console.log('Done.');
}
}
</script>
MainProject/src/PageComponents/PageOne.ts
import { Vue, Component, Prop } from 'vue-property-decorator';
import template from './PageOne.pug';
import Button from './../../../UiKitLibraryStillInDevelopment/UiComponents/Buttons/Button.vue';
@Component({ template, components: { Button } })
export default class SkipProjectInitializationStepPanel extends Vue {}
MainProject/src/PageComponents/PageOne.pug
.RootElement
Button(:text="'Click me'")
ui-kit-libary-in-development/UiComponents/Buttons/Button.vue
<template lang="pug">
button {{ text }}
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component
export default class SimpleCheckbox extends Vue {
@Prop({ type: String, required: true }) private readonly text!: string;
private created(): void {
console.log('OK!');
console.log(this.$props);
}
}
</script>
我发现的所有线索都是第Setting components in Component decorator causes Typescript 2.4 error期的 comments :
侧部组件应添加.d、 it's for it work AFAIK.
根据这条线索，出现了以下问题:
- 我应该在哪里创建
.d.ts-在我的主要项目或依赖项中？最有可能是在主项目中，但如果是这样，为什么我可以在第三方库(如vuetify)中导入侧组件？因为那里有.d.ts个！ - 我需要如何在
.d.ts中声明新的Vue组件？一些教程或例子？
赏金的源文件
因为我无法重现这个问题，而且我的项目仍然是原始的(还没有商业价值)，所以我可以通过Google Drive(link for downloading zip archive)分享它.所有node_modules都包括在内，只需在main-project目录中运行npm run developmentBuild即可.
如果你担心潜在的病毒，你也可以在this repository中获得源文件，但因为它不包括node_modules，为了复制，需要在main-project和dependency目录中执行npm install.