搜索
首页web前端js教程在vue中使用ts的技巧

在vue中使用ts的技巧

Mar 19, 2018 pm 02:24 PM
使用技巧

注意:此文并不是把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文件

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

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类型,如果类型不匹配将会抛出异常

部分代码献上:

<code>const _check = function (checked,checker) {
        check:    <br>        for(let i = 0; i < checked.length; i++) {      <br>        if(/(any)/ig.test(checker[i]))        <br>            continue check;      <br>        if(_isPlainObject(checked[i]) && /(object)/ig.test(checker[i]))<br>            continue check;      <br>        if(_isRegExp(checked[i]) && /(regexp)/ig.test(checker[i]))<br>            continue check;      <br>        if(Array.isArray(checked[i]) && /(array)/ig.test(checker[i]))<br>            continue check;      <br>        let type = typeof checked[i];      <br>        let checkReg = new RegExp(type,'ig')      <br>        if(!checkReg.test(checker[i])) {        <br>            console.error(checked[i] + 'is not a ' + checker[i]);        <br>            return false;
      }
    }    return true;
  }  /**
   * @description 检测类型
   *   1.用于校检<a href="http://www.php.cn/wiki/147.html" target="_blank">函数参数</a>的类型,如果类型错误,会打印错误并不再执行该函数;
   *   2.类型检测忽略大小写,如string和String都可以识别为字符串类型;
   *   3.增加any类型,表示任何类型均可检测通过;
   *   4.可检测多个类型,如 "number array",两者均可检测通过。正则检测忽略连接符 ;
   */
  export function typeCheck() {    <br>      const checker =  Array.prototype.slice.apply(arguments);    <br>          return function (target, funcName, descriptor) {      <br>              let oriFunc = descriptor.value;
              descriptor.value =  function () {        <br>              let checked =  Array.prototype.slice.apply(arguments);        <br>                  let result = undefined;        <br>                  if(_check(checked,checker) ){
                      result = oriFunc.call(this,...arguments);
        }             return result;
      }
    }
  };</code>

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库了哦。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

在前端中的html基础知识 

Css float的盒子模型position

以上是在vue中使用ts的技巧的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
JavaScript在行动中:现实世界中的示例和项目JavaScript在行动中:现实世界中的示例和项目Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript和Web:核心功能和用例JavaScript和Web:核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互;2)在用户提交数据前进行客户端验证,提高用户体验;3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎:实施详细信息了解JavaScript引擎:实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要,因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段;2)执行过程中,引擎会进行动态优化,如内联缓存和隐藏类;3)最佳实践包括避免全局变量、优化循环、使用const和let,以及避免过度使用闭包。

Python vs. JavaScript:学习曲线和易用性Python vs. JavaScript:学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者,学习曲线平缓,语法简洁;JavaScript适合前端开发,学习曲线较陡,语法灵活。1.Python语法直观,适用于数据科学和后端开发。2.JavaScript灵活,广泛用于前端和服务器端编程。

Python vs. JavaScript:社区,图书馆和资源Python vs. JavaScript:社区,图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好,适合初学者,但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大,JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富,但Python适合从官方文档开始,JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript:所有工作方式从C/C到JavaScript:所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1)C/C 是静态类型语言,需手动管理内存,而JavaScript是动态类型,垃圾回收自动处理。2)C/C 需编译成机器码,JavaScript则为解释型语言。3)JavaScript引入闭包、原型链和Promise等概念,增强了灵活性和异步编程能力。

JavaScript引擎:比较实施JavaScript引擎:比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时,效果会有所不同,因为每个引擎的实现原理和优化策略各有差异。1.词法分析:将源码转换为词法单元。2.语法分析:生成抽象语法树。3.优化和编译:通过JIT编译器生成机器码。4.执行:运行机器码。V8引擎通过即时编译和隐藏类优化,SpiderMonkey使用类型推断系统,导致在相同代码上的性能表现不同。

超越浏览器:现实世界中的JavaScript超越浏览器:现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制:1.通过Node.js实现服务器端编程,适用于高并发请求处理。2.通过ReactNative进行移动应用开发,支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制,适用于硬件交互。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境