在typescript中import第三方類庫clipboard報錯

一、問題

在實際開發項目中就遇到了這樣的問題，需要在Vue+Typescript項目中添加復制文本的功能，就找了clipboard插件，先是新建了一個新的項目用來實驗看看是否好用，都寫好了以后發給別人讓在項目里添加，結果采用常規的方法導入第一句話就提示錯誤。然后又用了vue-clipboard2插件導入 import VueClipboard form'vue-clipboard2'同樣報一樣問題，剛開始一直沒意識到是typescript的原因。報錯如下：

TS7016: Could not find a declaration file for module 'vue-clipboard2'. 'D:/Work/wechat/node_modules/vue-clipboard2/vue-clipboard.js' implicitly has an 'any' type.   Try `npm install @types/vue-clipboard2` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-clipboard2';

二、錯誤原因

因為第三方類庫並沒有ts的.d.ts 類型的聲明文件，所以無法在目前的項目中正常使用。舉個栗子，我們使用vant，首先是在項目里安裝，然后再項目里引入。

npm i vant -S  //在項目里安裝
import { Toast } from 'vant'; //引入項目

會發現這里並沒有報錯，我們查看node_modules，找到vant文件，發現里面有types文件夾，types文件夾里面有index.d.ts等文件，這個文件夾的用處就在於將弱類型轉換為強類型，對插件里面的變量方法什么的進行了聲明和定義。所以可以在typescript項目里正常使用。

而我不管是安裝vue-clipboard2還是clipboard，在文件里都未發現types文件夾及index.d.ts等文件，所以項目不支持使用。

查閱網上資料，可以自定定義(.d.ts)來描述庫的類型和@types兩種聲明方式，第一次我模仿官網上jquery來寫.d.ts（如下圖：）不過沒成功，就想着那就試試@types。

三、解決方法

查閱相關資料后在，做了下面的嘗試。

npm install @types/vue-clipboard2

即vue-clipboard2安裝的前提下再增加安裝@types的npm modules即可，然后就嘗試了一下，依舊報錯（如下）：

D:\Work\wechat>npm install @types/vue-clipboard2
npm ERR! code E404
npm ERR! 404 Not Found: @types/vue-clipboard2@latest

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\ever\AppData\Roaming\npm-cache\_logs\2019-06-17T03_21_01_988Z-debug.log

這個原因是並沒有vue-clipboard2的types聲明文件，所以在使用之前還是需要在typesearch里面查看一下相關的類庫是否有聲明文件，https://microsoft.github.io/TypeSearch/   查詢結果如下：

所以就采用了clipboard

通過npm執行安裝@types/clipboard插件，安裝完成后就可以在項目中正常的使用clipboard了。

在項目里安裝

npm install --save @types/clipboard

在項目中引入

import clipboard from 'clipboard';
//注冊到vue原型上（這里不是很明白，還沒搞清楚）
Vue.prototype.clipboard = clipboard;

 <h1 class="coupon-code" id="bar">{{couponCode}}</h1>
 <button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar"  @click="copyLink">點擊復制</button>

我們需要定義data-clipboard-action 屬性，來選擇是復制還是剪切，如果忽略這個，默認是copy

  public copyLink() {
    const This = this;
    const clipboard = new Vue.prototype.clipboard('.btn');
    clipboard.on('success', () => {
      // Toast('復制成功');
      This.$toast('復制成功');
    });
    clipboard.on('error', () => {
      Toast('復制失敗，請手動選擇復制！');
    });
  }