Question

我正在用打字稿写一个vue项目，我想使用通过JavaScript编写的第三部分库中的mixin，如何编写.d.ts以使ts可以在mixin中找到函数定义？ / p>

我尝试过这种方法，但不起作用：

// common.d.ts
declare module 'thrid-part-lib' {
    import { VueClass } from 'vue-class-component/lib/declarations';

    export interface SomeMixin<T> extends VueClass<T> {
        refresh(): Promise<void>;
    }
}

// index.ts
import { Component, Mixins } from 'vue-property-decorator';
import { SomeMixin } from 'thrid-part-lib';

@Component
export default class Index extends Mixins(SomeMixin) {
    public foo() {
        this.refresh(); // 'refresh' is not define.
    }
}

Answer 1

您可以通过创建类似vuelidate-error-extractor.d.ts的文件来增强第三方混合：

declare module 'vuelidate-error-extractor' {
   import { ValidationRule } from 'vuelidate/lib/validators';

   // eslint-disable-next-line @typescript-eslint/class-name-casing
   export class singleErrorExtractorMixin extends Vue {
      readonly events: any;

      readonly name: string;

      readonly isValid: boolean;

      readonly hasErrors: boolean;

      readonly preferredValidator: ValidationRule;
   }
}

这会增加this JS file，但不完整。

Answer 2

这在"Augmenting Types for Use with Plugins"中有记录。

将其放入项目的.d.ts文件中，以向组件添加refresh() mixin方法：

// 1. Make sure to import 'vue' before declaring augmented types
import Vue from 'vue'

// 2. Specify a file with the types you want to augment
//    Vue has the constructor type in types/vue.d.ts
declare module 'vue/types/vue' {
  // 3. Declare augmentation for Vue
  interface Vue {
    refresh():  void;
  }
}

如何为vue声明JS mixin？

2 个答案: