vue 使用带有选项API的defineComponent更改属性和数据类型

kt06eoxx  于 4个月前  发布在  其他
关注(0)|答案(1)|浏览(48)

版本

2.7.10

复现链接

https://codesandbox.io/s/vue

复现步骤

以下代码展示了问题。切换回 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 是否为具有隐藏状态的类提供了一个标记接口,以便与响应式兼容?
x8goxv8g

x8goxv8g1#

这是因为data()的返回类型现在需要考虑潜在嵌套引用的解包。解包结果是类示例类型的Map类型,无法保留私有属性。
不幸的是,这似乎是一个正确性与不便之间的问题(你可以通过将this.foo as Foo进行类型转换来解决这个问题)——解包在技术上是正确的和必要的,但TypeScript目前没有提供一种在保留类的私有属性的同时创建Map类示例类型的方法。

相关问题