由于js文件没有类型检测，当我们把ts文件引入的时候，ts文件会转化成js文件，所以在js文件中引用ts文件的方法类型检测机制不会生效。也就是说只有在ts文件内才会有类型检测机制。
那么怎么在js文件中使用类型检测机制呢？小编自己封装了一套typeCheck的decorator方法，仅供参考！用法如下：
@typeCheck('object','number') deleteItem(item,index) {}
检测deleteItem方法参数： item为object类型，index为number类型，如果类型不匹配将会抛出异常
部分代码献上：
const _check = function (checked,checker) { check: for(let i = 0; i < checked.length; i++) { if(/(any)/ig.test(checker[i])) continue check; if(_isPlainObject(checked[i]) && /(object)/ig.test(checker[i])) continue check; if(_isRegExp(checked[i]) && /(regexp)/ig.test(checker[i])) continue check; if(Array.isArray(checked[i]) && /(array)/ig.test(checker[i])) continue check; let type = typeof checked[i]; let checkReg = new RegExp(type,'ig') if(!checkReg.test(checker[i])) { console.error(checked[i] + 'is not a ' + checker[i]); return false; } } return true; } /** * @description 检测类型 * 1.用于校检函数参数的类型，如果类型错误，会打印错误并不再执行该函数； * 2.类型检测忽略大小写，如string和String都可以识别为字符串类型； * 3.增加any类型，表示任何类型均可检测通过； * 4.可检测多个类型，如 "number array",两者均可检测通过。正则检测忽略连接符 ； */ export function typeCheck() { const checker = Array.prototype.slice.apply(arguments); return function (target, funcName, descriptor) { let oriFunc = descriptor.value; descriptor.value = function () { let checked = Array.prototype.slice.apply(arguments); let result = undefined; if(_check(checked,checker) ){ result = oriFunc.call(this,...arguments); } return result; } } };
ts的类型检测配合typeCheck基本上已经满足了我们的需要。
2、如何在ts中引用js文件？
由于js文件中没有类型检测，所以ts文件引入js文件时会转化为any类型，当然我们也可以在 .d.ts文件中声明类型。
如 global.d.ts 文件
当然有的时候我们需要使用一些库，然而并没有声明文件，那么我们在ts文件中引用的时候就会是undefined。这个时候我们应该怎么做？
比如我想要在util.ts文件中用 ‘query-string'的时候我们就会这样引用：
import querystring from 'query-string';
然而当你打印querystring 的时候是undefined。如何解决呢？小编的方法也仅供参考
新建module.js文件
import querystring from 'query-string'; export const qs = querystring;
utile.ts 文件
import { qs } from './module.js';
解决了。打印qs不再是undefined，可以正常使用qs库了哦。
至此本文就将ts在vue中的配置介绍结束，此文只代表个人看法，考虑到项目的扩展性，所以没有全部替换成ts，只是尝试性在vue中引入ts，还有很多需要改进的地方，如果有更好的建议和意见可以联系我！
总结
以上所述是小编给大家介绍的在Vue组件中使用 TypeScript的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: