版本
2.7.10
复现链接
复现步骤
以下代码展示了问题。切换回 Vue.extend() API 使错误消失。
<script lang="ts">
import Vue, { defineComponent } from 'vue';
class Foo {
private readonly _bar: string;
constructor(bar: string) {
this._bar = bar;
}
}
function process(foo: Foo) {}
// No error with the previous API
// export default Vue.extend({
export default defineComponent({
name: 'Test',
data() {
return {
foo: new Foo('none'),
};
},
methods: {
process() {
return process(this.foo); // Argument of type '{}' is not assignable to parameter of type 'Foo'.
},
},
});
</script>预期结果
属性和数据保留类型
实际发生的情况
错误 Argument of type '{}' is not assignable to parameter of type 'Foo'.
在 Vue 2.7 中使用选项 API 确实有助于迁移。
尽管 Vue.extend() API 为具有私有成员的类报告了正确的类型，但现在 defineComponent API 报告了一个未 Package 的类型并导致 typescript 错误。
解决方法？
- 如何处理这种情况？
- Vue 是否为具有隐藏状态的类提供了一个标记接口，以便与响应式兼容？
1条答案
按热度按时间x8goxv8g1#
这是因为
data()的返回类型现在需要考虑潜在嵌套引用的解包。解包结果是类示例类型的Map类型，无法保留私有属性。不幸的是，这似乎是一个正确性与不便之间的问题(你可以通过将
this.foo as Foo进行类型转换来解决这个问题)——解包在技术上是正确的和必要的，但TypeScript目前没有提供一种在保留类的私有属性的同时创建Map类示例类型的方法。