vue-class-component + typescript：如何在导入的函数中使用组件的类作为“this”的类型？答案

【问题标题】：vue-class-component + typescript: how to use a component's class as a type of "this" in imported function?vue-class-component + typescript：如何在导入的函数中使用组件的类作为“this”的类型？
【发布时间】：2021-03-17 00:25:04
【问题描述】：

我正在使用 vue-class-component 并且我有一个导入的函数，我想将其用作我的组件方法的值。为了说明我想要实现的目标，假设我有一个文件 TestComponent.vue，它看起来像这样：

<template>
  <div class="wrapper">
    <div class="text">{{ helper() }}</div>
  </div>
</template>

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator';
  import helper from './helper';

  @Component({
    name: 'TestComponent' 
  })
  export default class TestComponent extends Vue {
    someString = 'I want it to be shown';
    helper = helper;
  }
</script>

而我的 helper.ts 文件是这样的：

export default function(this: any) {
  return `${ this.someString } [ this text was added in helper function ]`; 
}

问题是我不想将 helper.ts 中的 this 分配给 any 类型。我希望它是一种 TestComponent 类。但是当我输入这个时：

import TestComponent from './TestComponent.vue';

export default function(this: TestComponent) {
  return `${ this.someString } [ this text was added in helper function ]`; 
}

我有一个错误，提示“'Vue' 类型上不存在属性 'someString'”。我找到了解决方案。如果我将一个类定义放到一个单独的文件中，比如说TestComponentClass.ts，然后在TestComponent.vue中导入它并输入export default class TestComponent extends TestComponentClass {}，我也可以在helper.ts中导入这个类并将其用作this的类型函数内的关键字。但这似乎太乏味了。

所以我的问题是：

有没有更好的方法来实现这一目标？
@Component 装饰器实际上如何影响类的类型？我试图在官方文档中寻找答案，但它没有深入解释这个装饰器的实现。

提前致谢！

【问题讨论】：

标签： typescript vue.js vue-class-components vue-property-decorator

【解决方案1】：

您可能会使用一个名为mixin 的东西。这个想法是，而不是写作

export default TestComponent extends Vue {}

您编写扩展 Vue 的单独类，在其中指定所需的所有其他属性，并将 TestComponent 重写为扩展 mixins 而不是直接 Vue：

TestMixin.ts

import Component, { Vue } from 'vue-class-component'

@Component()
export default class TestMixin extends Vue {
  someString = 'Anything you want it to be';
}

TestComponent.vue

import Component, { mixins } from 'vue-class-component'
import TestMixin from './mixins/TestMixin';

@Component()
export default class TestComponent extends mixins(TestMixin) { ... }

这样，TestComponent 将拥有您的“someString”属性。

【讨论】：