Vue-awesome-swiper: In Typescript, This dependency was not found

[wurining]

我使用typescript语言开发Vue的应用，在加入此插件时出现了如下的错误，导致无法使用。
Error Info:

ERROR in /Users/wurining/Documents/WebStormPRO/ccw_personal/src/components/portal/PostList.vue
33:41 Could not find a declaration file for module 'vue-awesome-swiper'. '/Users/wurining/Documents/WebStormPRO/ccw_personal/node_modules/vue-awesome-swiper/dist/vue-awesome-swiper.js' implicitly has an 'any' type.
  Try `npm install @types/vue-awesome-swiper` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-awesome-swiper';`
    31 |
    32 |     import 'swiper/dist/css/swiper.css'
  > 33 |     import { swiper, swiperSlide } from 'vue-awesome-swiper'
       |                                         ^
    34 |
    35 |     @Component({
    36 |         swiper,
ERROR in /Users/wurining/Documents/WebStormPRO/ccw_personal/src/components/portal/PostList.vue
36:9 Argument of type '{ swiper: any; swiperSlide: any; }' is not assignable to parameter of type 'VueClass<Vue>'.
  Object literal may only specify known properties, and 'swiper' does not exist in type 'VueClass<Vue>'.
    34 |
    35 |     @Component({
  > 36 |         swiper,
       |         ^
    37 |         swiperSlide
    38 |     })
    39 |     export default class PostList extends Vue {
Version: typescript 2.9.2
Time: 645ms

使用vue-awesome-swiper的vue组件

<template>
    <div>
        <swiper :options="swiperOption">
            <swiper-slide>Slide 1</swiper-slide>
            <swiper-slide>Slide 2</swiper-slide>
            <swiper-slide>Slide 3</swiper-slide>
            <swiper-slide>Slide 4</swiper-slide>
            <swiper-slide>Slide 5</swiper-slide>
            <swiper-slide>Slide 6</swiper-slide>
            <swiper-slide>Slide 7</swiper-slide>
            <swiper-slide>Slide 8</swiper-slide>
            <swiper-slide>Slide 9</swiper-slide>
            <swiper-slide>Slide 10</swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>
<style lang="scss">
</style>
<script lang="ts">
    import Vue from "vue";
    import Component from "vue-class-component";

    import 'swiper/dist/css/swiper.css'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'

    @Component({
        swiper,
        swiperSlide
    })
    export default class PostList extends Vue {
        swiperOption: object = {
            slidesPerView  : 3,
            slidesPerColumn: 2,
            spaceBetween   : 30,
            pagination     : {
                el       : ".swiper-pagination",
                clickable: true
            }
        };
    }
</script>

目前看来应该是没有添加typescript的d.ts声明文件。可否会写d.ts的老师添加一个pr？

[wurining]

_我在Stack Overflow上找到一种方法，可以实现typescript中引用此插件，不过违背了该语言对类型检查的宗旨。慎用！_

• 找到项目的tsconfig.json文件，在编译选项中设置"noImplicitAny": false即可，当noImplicitAny标志为 false，如果编译器不能根据变量的使用来推断变量的类型，直接默认为any类型。

[chenjinxinlove]

vue的ts生态还是比react差一些

[chenjinxinlove]

添加

declare module 'vue-awesome-swiper' {
  export const swiper: any
  export const swiperSlide: any
}

declare module 'vue-lazyload'

[smac89]

Create a file called vue-awesome-swiper.d.ts with the following:

declare module 'vue-awesome-swiper' {
    import Swiper, {SwiperOptions} from 'swiper';
    import Vue, {PluginObject} from 'vue';

    interface VueAwesomeSwiper extends PluginObject<SwiperOptions> {
        Swiper: Swiper;
        swiper: Vue;
        swiperSlide: Vue;
    }

    const VueAwesomeSwiper: VueAwesomeSwiper;
    export default VueAwesomeSwiper;

    export const swiper: Vue;
    export const swiperSlide: Vue;
    export { default as Swiper } from 'swiper';
}

Add devDependency for @types/swiper to get the rest of the type definitions

[MillionQW]

@smac89 将 swiper 和 swiperSlide 声明为 Vue 类型在组件里引入的时候会报错：

Argument of type '{ components: { swiper: Vue; swiperSlide: Vue; }; }' is not assignable to parameter of  
 type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed,  
 PropsDefinition<Rec...'.

将 swiper、swiperSlider 的类型改为 VueConstructor<Vue> 即可。

[Anjing1993]

@MillionQW 将 swiper、swiperSlider 的类型改为 VueConstructor 即可。 好像也不对？

[MillionQW]

@Anjing1993 这个是我现在的配置：

declare module 'vue-awesome-swiper' {
  import Swiper, {SwiperOptions} from 'swiper';
  import Vue, {PluginObject, VueConstructor} from 'vue';

  interface VueAwesomeSwiper extends PluginObject<SwiperOptions> {
      Swiper: Swiper;
      swiper: VueConstructor<Vue>;
      swiperSlide: VueConstructor<Vue>;
  }

  const VueAwesomeSwiper: VueAwesomeSwiper;
  export default VueAwesomeSwiper;

  export const swiper: any;
  export const swiperSlide: VueConstructor<Vue>;
  export { default as Swiper } from 'swiper';
}

[silverprize]

declare module 'vue-awesome-swiper' {
  import { Vue } from "vue/types/vue"
  import SwiperClass, { SwiperOptions } from 'swiper'
  import { PluginObject } from "vue"

  export const Swiper: SwiperClass

  export const install: PluginObject<SwiperOptions>

  export class swiper extends Vue {
    swiper: SwiperClass
  }

  export class swiperSlide extends Vue {}
}

[TheSixer]

@silverprize
Argument of type '{ swiper: typeof swiper; swiperSlide: typeof swiperSlide; }' is not assignable to parameter of type 'VueClass<Vue>'. Object literal may only specify known properties, and 'swiper' does not exist in type 'VueClass<Vue>'.

[silverprize]

@TheSixth Could you show me your code with my code?
This is the code that works fine.

  import { Component, Vue } from 'vue-property-decorator'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import { SwiperOptions } from "swiper"

  @Component({
    components: {
      swiper,
      swiperSlide,
    },
  })
  export default class Viewer extends Vue {
    $refs!: {
      swiper: swiper
    }

    activeIndex: number = 0

    swiperOption: SwiperOptions = {
      initialSlide: 0,
    }

    get swiper() {
      return this.$refs.swiper.swiper
    }

    mounted() {
      this.swiper.on('transitionEnd', () => {
        this.activeIndex = this.swiper.activeIndex
      })
    }
  }

[TheSixer]

@silverprize I got the wrong code. thank you!

[Louis14lan]

maybe try this declare file，swiper version is 5.2.0

declare module 'vue-awesome-swiper' {
  import SwiperClass from 'swiper';

  export const Swiper: SwiperClass;
  export const SwiperSlide: SwiperClass;
}