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

Posted 2023-02-22

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

【英文标题】：vue-class-component + typescript: how to use a component's class as a type of "this" in imported function?

【发布时间】：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 装饰器实际上如何影响类的类型？我试图在官方文档中寻找答案，但它没有深入解释这个装饰器的实现。

提前致谢！

【参考方案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”属性。