在Vue组件中使用 TypeScript的方法

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

ts有什么用?

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

为什么用ts?

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

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

Angular: 我们为什么选择TypeScript?

  • TypeScript 里优秀的工具
  • TypeScript 是 JavaScript 的超集
  • TypeScript 使得抽象清晰可见
  • TypeScript 使代码更容易阅读和理解
  • 是的,我知道这看起来并不直观。让我用一个例子来说明我的意思。让我们来看看这个函数jQuery.ajax()。我们能从它的签名中得到什么信息?

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

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

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

以下是一个类型版本:

它给了我们更多的信息。

  • 这个函数的第一个参数是一个字符串。
  • 设置参数是可选的。我们可以看到所有可以传递到函数中的选项,不仅是它们的名称,还包括它们的类型。
  • 函数返回一个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文件下

现在就可以在我们原本的项目中使用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的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

您可能感兴趣的文章:

  • vue与TypeScript集成配置最简教程(推荐)
  • Vue2 Vue-cli中使用Typescript的配置详解
(0)

相关推荐

  • Vue2 Vue-cli中使用Typescript的配置详解

    前言 因为最近公司的团队热衷于vue框架,新项目想着练练typescript,于是开始了vue+ts的踩坑之路...本文意在为和我有一样想法的伙伴们省去踩坑的时间,下面话不多说了,来一起看看关于Vue2 Vue-cli中利用Typescript需要的配置是什么吧. 一.初步配置 首先安装官方插件vue-class-component,vue-property-decorator,配置webpack. webpack配置如下: 修改入口文件 entry: { app: './src/main.ts

  • vue与TypeScript集成配置最简教程(推荐)

    前言 Vue的官方文档没有给出与TypeScript集成的具体步骤,网上其他的教程不是存在问题就是与vue-cli建立的项目存在差异,让人无从下手. 下面我就给出vue-cli建立的项目与TypeScript集成的最简配置. 初始化项目 首先用vue-cli建立webpack项目.这里为了演示方便,没有打开router和eslint等,可以根据自身情况打开. # vue init webpack vue-typescript ? Project name vue-typescript ? Pro

  • 在Vue组件中使用 TypeScript的方法

    注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? TypeScript的设计目的应该是解决JavaScript的"痛点":弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程. typescript不仅可以约束我们的编码习惯,还能起到注释的作用,当我们看到一函数后我们立马

  • 在vue组件中使用axios的方法

    现在我们通过webpack+vue-cli搭建起了一个vue项目的框架,如果我们需要在vue组件中使用axios向后台获取数据应该怎么办呢? 通常情况下,我们搭建好的项目目录应该是这样子的 首先需要安装axios,这个会npm的都知道 下一步,在main.js中引入axios import axios from "axios"; 与很多第三方模块不同的是,axios不能使用use方法,转而应该进行如下操作 Vue.prototype.$axios = axios; 接着,我们就可以在A

  • vue组件中的数据传递方法

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递.组件之间传递数据大致分为三种情况: 父组件向子组件传递数据,通过 props 传递数据. 子组件向父组件传递数据,通过 events 传递数据. 两个同级组件之间传递数据,通过 event bus 传递数据. 一.父组件向子组件传递数据 子组件部分: <template> <div class="child"> {{ msg }} </

  • 在Vue.js中使用TypeScript的方法

    虽然 vue2.x 对TypeScript的支持还不是非常完善,但是从今年即将到来的3.0版本在GitHub上的仓库 vue-next看,为TS提供更好的官方支持应该也会是一个重要特性,那么,在迎接3.0之前,不妨先来看看目前版本二者的搭配食用方法吧~ 创建项目 虽然GitHub上有各种各样相关的Starter,但是使用 Vue CLI 应该是目前相对比较好的方式,在使用 vue create 创建新项目时,对 preset 选择 Manually select features 选项,之后添加

  • Vue 中使用 typescript的方法详解

    什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类型版本,除此之外,它还有一些扩展的语法,如interface/module等. typescript 在编译期会去掉类型和特有语法,生成纯粹的JavaScript. Typescript 5年内的热度随时间变化的趋势,整体呈现一个上升的趋势.也说明ts越来越️受大家的关注了. 安装typescript npm install -g ty

  • vue中使用TypeScript的方法

    引言 近几年前端对 TypeScript的呼声越来越高,Typescript也成为了前端必备的技能.TypeScript 是 JS类型的超集,并支持了泛型.类型.命名空间.枚举等特性,弥补了 JS 在大型应用开发中的不足. 在单独学习 TypeScript时,你会感觉很多概念还是比较好理解的,但是和一些框架结合使用的话坑还是比较多的,例如使用 React.Vue 这些框架的时候与 TypeScript 的结合会成为一大障碍,需要去查看框架提供的.d.ts的声明文件中一些复杂类型的定义.组件的书写

  • 在Vue组件中获取全局的点击事件方法

    使用场景: 在Vue组件中点击某元素之外的地方移除该元素 需求: 如上图所示,"用户列表"页面有三个Vue组件组成,分别是"菜单组件","导航组件"和"列表组件".其中"列表组件"中包含一个"下拉菜单",当我们点击"下拉菜单"以外的区域隐藏下拉菜单. 解决方法一: 出现"下拉菜单"的同时,建一个透明的遮罩层,然后只有"下拉菜单"

  • Vuex 在Vue 组件中获得Vuex 状态state的方法

    Vuex使用单一状态树(一个对象就包含了全部的应用层级状态),它作为唯一数据源存在,每个应用仅仅有一个store实例. 单一状态树使得我们能够直接定位任一特定的状态片段,在调试过程中也能轻易地取得整个当前应用状态的快照. 在Vue组件中获得Vuex状态 Vuex的状态存储是相应式的.在Vue组件中获取Vuex状态总共有 五种 可行的方法. 1.从store实例中读取状态最简单的方法就是在计算属性中返回某个状态:(需要导入store组件) const Counter={ template:`<di

  • vue组件中节流函数的失效的原因和解决方法

    今天使用节流函数的时候遇见了一个问题,搞了半天才找到原因,所以在这里做个总结. 节流函数 浏览器的一些事件,如:resize,scroll,mousemove等.这些事件触发频率太过频繁,绑定在这些事件上的回调函数会不停的被调用,加重浏览器的负担,导致用户体验非常糟糕.所以先贤们发明了节流函数,简单版本如下: function throttle (f, wait = 200) { let last = 0 return function (...args) { let now = Date.no

  • 详解vue组件中使用路由方法

    vue组件中使用路由 1.实现下载路由模块 的命令如下 2.引入路由的命令如下 3.实现接着通过use在vue全局注册使用的命令如下 4.最后将路由表导出的命令如下 5.在main.js中引入路由组件命令如下 6.在App.vue的模板中设置路由出口的命令如下 7.实现添加组件步骤如下 8.把组件添加到路由表的操作步骤如下 以上8点就是关于vue组件中使用路由的步骤,感谢大家对我们的支持.

随机推荐