ts2339 error: how to use typescript mixin in vuejs project?

Question

我最近将我的 vuejs 转换为 typescript base，但现在我在 typescript 中使用 mixin 时遇到问题。我使用了两种类型的 mixin，但 none 对我有用，它显示错误 ts2339，我无法在 https://vuejs.org/v2/guide/typescript.html#Basic-Usage 上找到解决方案：第一个：

//mixin.ts
import {ViewState} from "@/types";
import {mocked_view_state} from "@/api/mock/profile.device.group.mock";

export const ProfileDeviceGroup = {
  methods: {
    resetViewState(): ViewState {
      return mocked_view_state;
    }
  }
};

第二个：

//mixin.ts
import Vue from "vue";
import {ViewState} from "@/types";
import {mocked_view_state} from "@/api/mock/profile.device.group.mock";

const ProfileDeviceGroup = Vue.extend({
  methods: {
    resetViewState(): ViewState {
      return mocked_view_state;
    },

  }
});
export default ProfileDeviceGroup;

那么，有什么办法可以解决这个问题吗？

.......

更新：

.......

使用vue-typed-mixins后，问题已经解决，但又暴露出另一个问题，如下图所示：

Answer 1

您可以使用像 vue-typed-mixins or migrate to the Vue class component 模式这样的包并使用 implements.

@Component
export default class ComponentWithMixins extends Vue implements MyMixin {}

如果您使用的是 vue-property-decorator，它也内置了对 mixins 的支持：

@Component
export default class ComponentWithMixins extends mixins(MyMixin) {}

Answer 2

基于这个问题 https://github.com/ktsn/vue-typed-mixins/issues/4 这是我在 vue-typed-mixins 的 github 中创建的，这是一个未修复的问题，作者认为 webstorm 和 Vuetr 插件应该修复，并且它与 vue-typed-mixins 无关。但是我认为问题仍然与vue-typed-mixins插件有关，但我希望问题能尽快解决并且应该感谢vue-typed-mixins团队的作者，以及webstorm团队和Vuetr。

对于那些（像我一样）想要继续使用 vue+typescript 的人来说，似乎有一个更好的方法来解决这些问题，那就是 vue2-composition-api，一些团队一直在使用它，并告诉我它可以使用 typescript，并且没有问题，因为不再需要使用 mixin。

我希望它有用...

Answer 3

不确定这是否仍然相关，但我通过查看 vue-router 类型定义文件发现，您可以通过在 @vue/runtime-core模块。

您应该能够通过将此添加到您的 mixin.ts 文件来包含所有类型定义：

declare module '@vue/runtime-core' {
    export interface ComponentCustomProperties {
        resetViewState: () => ViewState;
    }
}

但是我只在 vscode 中使用 vue3 和常规的单文件组件测试过这个，有时需要重新加载当前 vscode window 以应用所有类型对运行时核心的更改。

ts2339 error: how to use typescript mixin in vuejs project?

ts2339 error: how to use typescript mixin in vuejs project?

mixins

typescript

vue.js

vuejs2

vue-mixin