问题描述

TypeScript 使用 Swiper 4.x thumbs 报错、但不影响使用、但无法通过编译

TS 环境是 vue-cli 3.x 模版生成的、Swiper 也已经在 vue.config.js 中配置、配置代码如下

module.exports = {
    baseUrl: '/',
    outputDir: 'dist',
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.js$/, // Check for all js files
                    exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/,
                    loader: 'babel-loader'
                }
            ],
        },
    },
    chainWebpack: config => {
        config.resolve.alias
            .set('assets', resolve('src/assets'))
            .set('style', resolve('src/style'))
    },
};

错误信息

Argument of type '{ observer: true; observeParents: true; speed: number; navigation: { nextEl: string; prevEl: stri...' is not assignable to parameter of type 'SwiperOptions | undefined'.
Object literal may only specify known properties, and 'thumbs' does not exist in type 'SwiperOptions | undefined'.

问题出现的环境背景及自己尝试过哪些方法

尝试添加断言 ! 无效

相关代码

<div class="swiper-top">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(slide, index) in data" :key="index">
            <img :src="slide.src">
        </div>
    </div>
</div>

<div class="box">
    <div class="swiper-prev"><i class="icon icon-arrow_left"></i></div>
    <div class="swiper-bottom">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(slide, index) in data" :key="index">
                <img :src="slide.src">
            </div>
        </div>
    </div>
    <div class="swiper-next"><i class="icon icon-arrow_right"></i></div>
</div>

let thumbs = {
    swiper: {
        el: '.swiper-bottom',
        observer: true,
        observeParents: true,
        slidesPerView: 4,
        spaceBetween: 10,
    }
};
this.swiper = new Swiper('.swiper-top', {
    observer: true,
    observeParents: true,
    speed: 500,

    navigation: {
        nextEl: '.swiper-next',
        prevEl: '.swiper-prev',
    },

    thumbs, // 这行被标注错误、我确定它能正常工作、暂时不清楚 TS 错误信息如何清除

});

.swiper-top {
    width: 700px;
    height: 500px;
    overflow: hidden;
}
.box {
    width: 700px;
    height: 90px;
    margin-top: 20px;
    .flex(space-between);
    .swiper-bottom {
        width: 600px;
        height: 100%;
        overflow: hidden;
    }
}

.swiper-next,
.swiper-prev {
    width: 30px;
    height: 100%;
    background: rgba(255, 255, 255, .5);
    .flex();
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}