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

Question

我正在将Vue.js组件迁移到TypeScript。按照指南进行操作，我尝试将其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非反应性属性。但是，y由于扩展在TypeScript中的工作方式，我只是无法获得适用于属性的类型推断。

我无法使用简单的对象导出来定义组件，因为它开始对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
     }>();
  }