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

1、問題

在實際開發項目中就遇到了這樣的問題，須要在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';

2、錯誤緣由

由於第三方類庫並無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。

3、解決方法

查閱相關資料後在，作了下面的嘗試。

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('複製失敗，請手動選擇複製！');
    });
  }