In Typescript, This dependency was not found

我使用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？

[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

[chenjinxinlove]

添加

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

declare module 'vue-lazyload'