在typescript中import第三方类库clipboard报错
<h2>一、问题</h2><p>在实际开发项目中就遇到了这样的问题，需要在Vue+Typescript项目中添加复制文本的功能，就找了clipboard插件，先是新建了一个新的项目用来实验看看是否好用，都写好了以后发给别人让在项目里添加，结果采用常规的方法导入第一句话就提示错误。然后又用了vue-clipboard2插件导入 import VueClipboard form'vue-clipboard2'同样报一样问题，刚开始一直没意识到是typescript的原因。报错如下：</p>
<p><span style="color: rgba(255, 0, 0, 1)">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';</span></p>
<h2><span style="color: rgba(255, 0, 0, 1)"><img src="https://img2018.cnblogs.com/blog/1595694/201906/1595694-20190617144909141-1760521747.png"></span></h2>
<h2>二、错误原因</h2>
<p>因为第三方类库并没有ts的.d.ts 类型的声明文件，所以无法在目前的项目中正常使用。举个栗子，我们使用vant，首先是在项目里安装，然后再项目里引入。</p>
<div class="cnblogs_code">
<pre>npm i vant -S<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">在项目里安装</span>
import { Toast } from 'vant'; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">引入项目</span></pre>
</div>
<p>会发现这里并没有报错，我们查看node_modules，找到vant文件，发现里面有types文件夹，types文件夹里面有index.d.ts等文件，这个文件夹的用处就在于将弱类型转换为强类型，对插件里面的变量方法什么的进行了声明和定义。所以可以在typescript项目里正常使用。</p>
<p><img src="https://img2018.cnblogs.com/blog/1595694/201906/1595694-20190617171253791-594421303.png"></p>
<p>而我不管是安装vue-clipboard2还是clipboard，在文件里都未发现types文件夹及index.d.ts等文件，所以项目不支持使用。</p>
<p>查阅网上资料，可以自定定义(.d.ts)来描述库的类型和@types两种声明方式，第一次我模仿官网上jquery来写.d.ts（如下图：）不过没成功，就想着那就试试@types。</p>
<p><img src="https://img2018.cnblogs.com/blog/1595694/201906/1595694-20190617174126988-610759507.png"></p>
<h2>三、解决方法</h2>
<p>查阅相关资料后在，做了下面的尝试。</p>
<div class="cnblogs_code">
<pre>npm install @types/vue-clipboard2</pre>
</div>
<p>即vue-clipboard2安装的前提下再增加安装@types的npm modules即可，然后就尝试了一下，依旧报错（如下）：</p>
<div><span style="color: rgba(255, 0, 0, 1)">D:\Work\wechat>npm install @types/vue-clipboard2</span><br><span style="color: rgba(255, 0, 0, 1)">npm ERR! code E404</span><br><span style="color: rgba(255, 0, 0, 1)">npm ERR! 404 Not Found: @types/vue-clipboard2@latest</span></div>
<div><span style="color: rgba(255, 0, 0, 1)">npm ERR! A complete log of this run can be found in:</span><br><span style="color: rgba(255, 0, 0, 1)">npm ERR! C:\Users\ever\AppData\Roaming\npm-cache\_logs\2019-06-17T03_21_01_988Z-debug.log</span></div>
<div><img src="https://img2018.cnblogs.com/blog/1595694/201906/1595694-20190617165753908-1633696120.png">
<p>这个原因是并没有vue-clipboard2的types声明文件，所以在使用之前还是需要在typesearch里面查看一下相关的类库是否有声明文件，https://microsoft.github.io/TypeSearch/ 查询结果如下：<img src="https://img2018.cnblogs.com/blog/1595694/201906/1595694-20190617171951858-422073320.png"></p>
<p>所以就采用了clipboard</p>
<p>通过npm执行安装@types/clipboard插件，安装完成后就可以在项目中正常的使用clipboard了。</p>
</div>
<p>在项目里安装</p>
<div class="cnblogs_code">
<pre>npm install --save @types/clipboard</pre>
</div>
<p>在项目中引入</p>
<div class="cnblogs_code">
<pre>import clipboard from 'clipboard'<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">注册到vue原型上（这里不是很明白，还没搞清楚）</span>
Vue.prototype.clipboard = clipboard;</pre>
</div>
<div class="cnblogs_code">
<pre> <h1 class="coupon-code" id="bar">{{couponCode}}</h1>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar"@click="copyLink">点击复制</button></pre>
</div>
<p>我们需要定义<code>data-clipboard-action</code> 属性，来选择是复制还是剪切，如果忽略这个，默认是copy</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">public copyLink() {
const This </span>= <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">;
const clipboard </span>= <span style="color: rgba(0, 0, 255, 1)">new</span> Vue.prototype.clipboard('.btn'<span style="color: rgba(0, 0, 0, 1)">);
clipboard.on(</span>'success', () =><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Toast('复制成功');</span>
This.$toast('复制成功'<span style="color: rgba(0, 0, 0, 1)">);
});
clipboard.on(</span>'error', () =><span style="color: rgba(0, 0, 0, 1)"> {
Toast(</span>'复制失败，请手动选择复制！'<span style="color: rgba(0, 0, 0, 1)">);
});
}</span></pre>
</div>
<p> </p>
</div>
<div id="MySignature" role="contentinfo">
不要忘了自己为了什么前进<br><br>
来源：https://www.cnblogs.com/songForU/p/11041222.html
頁:
[1]