如何在vue中使用ts的示例代码


Posted in Javascript onFebruary 28, 2018

本文介绍了如何在vue中使用ts的示例代码,分享给大家,具体如下:

注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡。

ts有什么用?

类型检查、直接编译到原生js、引入新的语法糖

为什么用ts?

TypeScript的设计目的应该是解决JavaScript的“痛点”:弱类型和没有命名空间,导致很难模块化,不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程。

typescript不仅可以约束我们的编码习惯,还能起到注释的作用,当我们看到一函数后我们立马就能知道这个函数的用法,需要传什么值,返回值是什么类型一目了然,对大型项目的维护性有很大的提升。也不至于使开发者搬起石头砸自己的脚。

Angular: 我们为什么选择TypeScript?

  1. TypeScript 里优秀的工具
  2. TypeScript 是 JavaScript 的超集
  3. TypeScript 使得抽象清晰可见
  4. TypeScript 使代码更容易阅读和理解

是的,我知道这看起来并不直观。让我用一个例子来说明我的意思。让我们来看看这个函数jQuery.ajax()。我们能从它的签名中得到什么信息?

如何在vue中使用ts的示例代码

我们唯一能确定的是这个函数有两个参数。我们可以猜测这些类型。也许第一个是字符串,第二个是配置对象。但这只是猜测,我们可能错了。我们不知道什么选项进入设置对象(它们的名称和类型),或者该函数返回什么。

在不检查源代码或文档的情况下,我们不可能调用这个函数。检查源代码并不是一个好的选择——拥有函数和类的目的,是在不知道如何实现它们的情况下使用它们。换句话说,我们应该依赖于他们的接口,而不是他们的实现。我们可以检查文档,但这并不是最好的开发经验——它需要额外的时间,而且文档经常过期。

因此,尽管很容易阅读jQuery.ajax(url,settings),真正理解如何调用这个函数,我们需要阅读它的实现或它的文档。

以下是一个类型版本:

如何在vue中使用ts的示例代码

它给了我们更多的信息。

  1. 这个函数的第一个参数是一个字符串。
  2. 设置参数是可选的。我们可以看到所有可以传递到函数中的选项,不仅是它们的名称,还包括它们的类型。
  3. 函数返回一个JQueryXHR对象,我们可以看到它的属性和函数。

类型化签名肯定比未类型化的签名长,但是:string,:JQueryAjaxSettings和JQueryXHR并不是混乱的。 它们是提高代码的可理解性的重要文档。我们可以更深入地理解代码,而不必深入到实现或读取文档中。 我的个人经验是,我可以更快地阅读类型化代码,因为类型提供了更多的上下文来理解代码。

摘自 Angular: 我们为什么选择TypeScript?

ts好学吗?

TypeScript的一个设计亮点就是它并没有抛弃JavaScript的语法另起炉灶,而是做成了JavaScript的超集(这个功劳应该记在Anders上),这样任何合法的JavaScript的语句在TypeScript下都是合法的,也就是说学习成本很低,如果你对JavaScript有比较深入的了解,那么其实可以很快的上手TypeScript,因为它的设计都是针对JavaScript的使用习惯和惯例。
一些简单的例子,一看即懂:

基础类型

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);

类型检查器会查看printLabel的调用。 printLabel有一个参数,并要求这个对象参数有一个名为label类型为string的属性。 需要注意的是,我们传入的对象参数实际上会包含很多属性,但是编译器只会检查那些必需的属性是否存在,并且其类型是否匹配。

当然还有一些高级的用法,这里就不做过多的介绍了,了解更多

如何在vue项目中应用ts?

1、首先安装ts

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

2、在根目录建tsconfig.json文件

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

3、在配置中添加 ts-loader

{
  test: /\.tsx?$/,
  loader: 'ts-loader',  exclude: /node_modules/,   options: {
   appendTsSuffixTo: [/\.vue$/],
  }
 }

4、最后把 .ts 后缀添加上就OK了,在webpack.base.conf.js文件下

如何在vue中使用ts的示例代码

现在就可以在我们原本的项目中使用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 文件

如何在vue中使用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,还有很多需要改进的地方,如果有更好的建议和意见可以联系我!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ie支持function.bind()方法实现代码
Dec 27 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
Vue.js动态组件解析
Sep 09 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 Javascript
说说node中的可读流和可写流的区别
Jun 01 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
vue.js打包之后可能会遇到的坑!
Jun 03 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
layer 关闭指定弹出层的例子
Sep 25 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 #Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 #Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 #Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 #Javascript
Vue-Router模式和钩子的用法
Feb 28 #Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 #Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 #Javascript
You might like
WordPress判断用户是否登录的代码
2011/03/17 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
解析vue中的$mount
2017/12/21 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python插入排序算法实例分析
2015/07/03 Python
Python制作爬虫抓取美女图
2016/01/20 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
深入了解Python 变量作用域
2020/07/24 Python
Python模块常用四种安装方式
2020/10/20 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
vivo智能手机官方商城:vivo
2016/09/22 全球购物
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
自荐信的五个重要部分
2013/10/29 职场文书
投标邀请书范文
2014/01/31 职场文书
期末复习计划
2015/01/19 职场文书
检讨书格式
2015/05/07 职场文书
创业计划书之酒吧
2019/12/02 职场文书
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL