【发布时间】：2019-12-12 18:56:44
【问题描述】：
尝试使用侧组件（项目目录外）时出现以下 TypeScript 错误：
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 加载程序运行 Webpack 时，in 在控制台中输出。
错误发生在：
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的名字来看，这还不是npm-dependency，所以暂时不在node_modules里面。
这完全是 TypeScript 错误；尽管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（如果不删除，则不会有任何变化）。
很遗憾，我无法重现此问题。出于某种原因，以下尝试复制作品没有错误：
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中的这条评论：
侧面组件应添加 .d.ts 以使其正常工作。
从这个线索，产生以下问题：
- 我应该在哪里创建
.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和@987654356中执行npm install @ 目录。
【问题讨论】：
-
" 是在我使用 TypeScript loader 运行 Webpack 时在控制台中输出的。" 你是如何运行它的？命令是什么，在什么文件夹下？
-
@acdcjunior，目录：“path/where/you/unzipped/**main-project**”，命令：
npm run developmentBuild。
标签： typescript vue.js vue-component typescript-decorator typescript-definitions