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

【问题标题】：How to specify non-reactive instance property in Vue.js using TypeScript?如何使用 TypeScript 在 Vue.js 中指定非反应性实例属性？
【发布时间】：2018-06-12 18:25:31
【问题描述】：

我正在将我的 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开心吗？

【问题讨论】：

vue-class-component 是一个官方的 Vue 库。
我对 TypeScript 了解不多，所以我的评论可能会被取消，但你为什么不使用计算值呢？那不会解决您的反应性财产案例吗？从技术上讲，它仍然是反应性的，但它不会是静态值。 computed: { y: function () { return 20 }}

标签： javascript typescript vue.js vuejs2

【解决方案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
     }>();
  }

【讨论】：

【解决方案2】：

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

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

然后只需在 created() 中将非反应性属性添加到此对象。

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

我还没有真正探索过的另一种方法是为您的组件创建一个打字稿 shim 文件。

【讨论】：

【解决方案3】：

没有函数包装的解决方案

Vue.extend({
  data() {
    const reactive = {
      name: 'Jack Sparrow',
    }

    return reactive as typeof reactive & {
      nonReactiveProperty: string;
    }
  },
})

【讨论】：