一, 问题
在实际开发项目中就遇到了这样的问题, 需要在 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('复制失败, 请手动选择复制!');
- });
- }
来源: https://www.cnblogs.com/songForU/p/11041222.html