let isDone: boolean = false; // 布尔值
 let decLiteral: number = 6;  // 数字
 let name: string = "bob"; // 字符串
 let list: number[] = [1, 2, 3]; // 数组
 ...
 ...

function printLabel(labelledObj: { label: string }) {  console.log(labelledObj.label);
 } let myObj = { size: 10, label: "Size 10 Object" };
 printLabel(myObj);

npm install --save-dev typescript npm install --save-dev ts-loader

{
  "compilerOptions": {
   "experimentalDecorators": true,
   "emitDecoratorMetadata": true,
   "lib": ["dom","es2016"],
   "target": "es5"
  },
  "include": ["./src/**/*"] 
}

{
  test: /\.tsx"text-align: center"> 


现在就可以在我们原本的项目中使用ts文件了。
如何实践？
1、如何在js中引用ts文件？
由于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的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！