前端時間vue3.0正式發(fā)布了，于是就嘗試把原有項目重構(gòu)一下，結(jié)合typescript重構(gòu)項目，總體上還是很容易上手的，就是在集成一些老的插件方面遇到一些問題，比如viewerjs，想和一些新手的兄弟們一起分享一下經(jīng)驗；

首先，安裝viewerjs

npm install viewerjs --save

viewerjs已經(jīng)集成好了ts的類型定義文件，我們不需要單獨安裝，只是在使用時候需要注意

一、全局引入

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
Viewer.setDefaults({
  navbar: true,
  title: true,
  toolbar: {
    prev: true,
    next: true,
  },
});
const Vue = createApp(App);
Vue.use(router);
Vue.use(() => Viewer); //這樣引入是為了兼容ts規(guī)定的類型，不用箭頭函數(shù)方式會報錯Argument of type 'typeof Viewer' is not assignable to parameter of type 'Plugin_2'.Property 'install' is missing in type 'typeof Viewer' but required in type '{ install: PluginInstallFunction; }'
Vue.mount('#app');

然而引入不報錯了，卻不能使用，這里如果那位大神解決了，煩勞告訴我一下解決辦法；
索性我們還是局部引入吧，畢竟也不是每個組件都能用到，于是放棄了在main.ts中使用；

二、局部引入，這次成功了

按照vue2的引入方式，結(jié)果涼涼了

<template>
  <div class="home images" id="viewerjs">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
    <img alt="Vue logo" src="../assets/logo.png" />
    <img alt="Vue logo" src="../assets/logo.png" />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
export default defineComponent({
  name: 'Home',
  components: {
    HelloWorld,
  },
  setup() {
    onMounted(() => {
      const aaaa = document.getElementById('viewerjs')
      new Viewer(~~aaaa~~, { // ts類型報錯 Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'.Type 'null' is not assignable to type 'HTMLElement'
        navbar: true,
        title: true,
        toolbar: {
          prev: true,
          next: true,
        },
      });
    });
  },
});
</script>

這個錯誤解釋就是，Viewer需要傳入的類型是HTMLElement，而aaa被推斷的類型的一個'HTMLElement | null'的聯(lián)合類型，所以不正確，那么實際上我們知道aaa就是一個HTMLElement類型所以可以使用類型斷言的方式，強制讓ts知道aaa的類型，于是解決了；

 const aaa = <HTMLElement>document.getElementById('viewerjs')
 //或者
 const aaa = document.getElementById('viewerjs') as HTMLElement
 

上述兩者都可以二選一，然后完美解決，附上全部代碼；

<template>
  <div class="home images" id="viewerjs">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
    <img alt="Vue logo" src="../assets/logo.png" />
    <img alt="Vue logo" src="../assets/logo.png" />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
export default defineComponent({
  name: 'Home',
  components: {
    HelloWorld,
  },
  setup() {
    onMounted(() => {
      new Viewer(document.getElementById('viewerjs') as HTMLElement, {
        navbar: true,
        title: true,
        toolbar: {
          prev: true,
          next: true,
        },
      });
    });
  },
});
</script>

微信截圖_20201110153916.png