重构我的代码后的新问题：“无效的道具：道具的类型检查失败”

Question

我正在使用 vue-property-decorator 属性在 Vue.js 2 中使用 Typescript 编写应用程序。我最近决定重构我的大部分代码，现在每次我通过 @Prop 装饰器将绑定属性传递给我的 vue 组件时，我都会收到一条错误消息，如下所示：

Invalid prop: type check failed for prop "pager". Expected PagerSettings, got Object 

所有这一切最糟糕的部分是应用程序仍然可以正常运行，它只是向我的浏览器控制台抛出一个丑陋的错误消息。如果我将我的属性更改为键入“any”，那么一切都会完美无误，但这首先违背了使用 Typescript 的全部目的。

我针对同一个问题搜索了一堆答案，而解决方案始终是“你没有通过你认为你正在通过的东西”。我有 99% 的把握不是这样的。无论类型如何，我传递给组件的每个道具都会发生这种情况。在我从样板模板开始一个新项目并将我的所有代码带回后，这开始发生了。

我的 tsconfig.json 完全一样，据我所知，我的 package.json 中的所有版本都与之前的项目相匹配。我开始查看 vue.config.js，它几乎与一些细微的变化相同，但不会影响变量通过 @Prop 指令的方式。

以前有没有其他人经历过这种情况？我还能看什么来弄清楚为什么会发生这种情况？

Answer 1

我仍然不确定为什么会突然发生这种情况，但我能够找到解决方法。最初我是这样声明我的道具的：

import { Vue, Component, Prop } from 'vue-property-decorator';

@Component({})
export default class Pagination extends Vue {

    @Prop()
    public pager: Pager;

}

我通过定义这样的类型来让它工作

import { Vue, Component, Prop } from 'vue-property-decorator';
import { PropType } from 'vue';

@Component({})
export default class Pagination extends Vue {

    @Prop({ type: Object as PropType<Pager> })
    public pager: Pager;

}