在TS中使用第三方库该怎么使用?

Question

最近在做TS+vue3.0的demo练习，现在我想用swiper6，按照官网的文档做法，引入swiper和swiperlide时提示我找不到声明文件，官网文档是vue2+js的写法，而后我卸载了这个包，安装了@types/swiper，版本是5.4.1，但是这个版本，我找不到使用说明。
我想问的是，我们使用第三方库在TS中和在JS中会有区别吗？TS最后都是编译成JS的啊，而且现在网上的很多文档使用都还停留在vue2+JS的使用教程上，找不到具体的使用方式，我该怎么学会在VUE3+TS的环境中使用这些第三方包

Answer 1

张轩 2020-12-10 15:54:05

看了一下 issue  vue3 的 ts 支持还在开发中 https://github.com/nolimits4web/swiper/issues/3916

不过可以这么写先简单过渡一下

declare module 'swiper/vue' {
  import _Vue from 'vue';

  export class Swiper extends _Vue {}

  export class SwiperSlide extends _Vue {}
}

Answer 2

张轩 2020-12-09 15:22:21

同学你好欧 一般用的比较多的库 都能找到@types 类型定义，对于一些小众或者是还没有完全适配ts 的库，最简单偷懒的方法就是声明一个模块，可以在 shims-vue.d.ts 文件中 直接添加

declare module 'qrcodejs2'

这样就可以使用这个库了 但是它是没有类型提示的 如果愿意你可以自己手写并丰富这些类型文件

• 提问者 见信 #1

  我试了下，还是有问题，方式1：npm install @types/swiper swiper --save
  方式2：declare module 'swiper' + npm install swiper
  都还是有问题，根据官方文档，引入swiper是这么写的：import { Swiper, SwiperSlide } from 'swiper/vue'
  全是说找不到声明文件
  我又尝试了declare module 'swiper/vue'，也还是不对，这次报的错连是什么错都不说明了，就是路径飘红。
  如果上面我用的方式对了，那就应该是swiper包内部文件结构变了，但是我看了它里面文件太多了，看不懂。
  我具体的问题是在哪呢