Question

我正在将Vue.js组件迁移到TypeScript。在guide之后，我尝试将Vue.extend()用于我的组件。我的组件是：

import Vue from 'vue';

const Component = Vue.extend({
  // type inference enabled

  created() {
    // `y` is non-reactive property
    this.y = 20; // TYPESCRIPT THROWS ERROR
  }

  data() {
     return {
        // x is reactive property
        x: 10
     };
  }

});

在上面的例子中，我的属性x是反应性的，y是非反应性属性。但是，由于增强在TypeScript中的工作方式，我无法为属性y进行类型推断。

我不能使用简单对象导出来定义我的组件，因为它开始为y和x抛出类型错误。

因为，现在我坚持将此文件保存为JS或移动我的代码vue-class-component，这使我能够处理这个问题。但是，我不愿意转移到vue-class-component，因为它是图书馆级别的代码。

我如何让TypeScript满意？

Answer 1

最简单的解决方案是这样的：

  data() {
     return {
        // x is reactive property
        x: 10
     } as any as { x: number; y: number };
  }

但是，这需要您明确定义data的所有属性。

或者，您可以使用以下帮助程序来完成此操作：

function withNonReactive<TData>(data: TData) {
    return <TNonReactive>() => data as TData & TNonReactive;
}

赞：

  data() {
     return withNonReactive({
        // x is reactive property
        x: 10
     })<{
        // non-reactive properties go here
        y: number
     }>();
  }

Answer 2

摆脱TypeScript错误的一种方法是定义以下属性：

data() {
    return {
       nonReactive: {} as any
    }
}

，然后将您的非反应性属性添加到created（）中的该对象中。

created() {
    this.nonReactive.foo = {}
}

我尚未真正探索的另一种方法是为您的组件创建一个打字稿填充文件。

如何使用TypeScript在Vue.js中指定非反应性实例属性？

2 个答案: