javascript - 如何使用 TypeScript 在 Vue.js 中指定非 react 性实例属性？

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这是 react 性和 y作为非 react 性属性。但是，我无法让类型推断适用于属性 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
     }>();
  }