浅谈Vue3.0之前你必须知道的TypeScript实战技巧


Posted in Javascript onSeptember 11, 2019

很多人对TypeScript的使用还停留在基本操作上,其实TypeScript的特性非常强大,我们利用好这些特性可以有效地提高代码质量、加速开发效率,今天就介绍9个非常实用的TypeScript技巧或者特性.

注释的妙用

我们可以通过 /** */ 来注释TypeScript的类型,当我们在使用相关类型的时候就会有注释的提示,这个技巧在多人协作开发的时候十分有用,我们绝大部分情况下不用去花时间翻文档或者跳页去看注释。

浅谈Vue3.0之前你必须知道的TypeScript实战技巧

巧用类型推导

TypeScript 能根据一些简单的规则推断(检查)变量的类型。

比如一个简单的add函数

function add(a: number, b: number) {
 return a + b
}

TypeScript就可以通过参数与return的运算符推导出函数的返回值

浅谈Vue3.0之前你必须知道的TypeScript实战技巧

如果想获取函数整体的类型那么可以借助 typeof

注意与JavaScript中的typeof区分开

type AddFn = typeof add

当然上述情况算是比较简单的情况,有时候我们的返回值类型其实比较复杂,这个时候借助类型推导和 ReturnType 就可以很轻松地获取返回值类型。

type returnType = ReturnType<typeof add> // number

上述技巧在对redux进行编码的时候非常适用,这样可以省略我们大量的重复代码,毕竟redux的编码工作是非常繁琐的。

巧用元组

有时候我们可能需要批量的来获取参数,并且每一个参数的类型还不一样,我们可以声明一个元组如:

function query(...args:[string, number, boolean]){
 const d: string = args[0];
 const n: number = args[1];
 const b: boolean = args[2];
}

巧用Omit

有时候我们需要复用一个类型,但是又不需要此类型内的全部属性,因此需要剔除某些属性,这个时候 Omit 就派上用场了。

interface User {
 username: string
 id: number
 token: string
 avatar: string
 role: string
}
type UserWithoutToken = Omit<User, 'token'>

这个方法在React中经常用到,当父组件通过props向下传递数据的时候,通常需要复用父组件的props类型,但是又需要剔除一些无用的类型。

浅谈Vue3.0之前你必须知道的TypeScript实战技巧

运用Record

Record 是TypeScript的一个高级类型,但是相关的文档并不多,所以经常被人忽略,但是是一个非常强大的高级类型。

Record允许从Union类型中创建新类型,Union类型中的值用作新类型的属性。

举个简单的例子,比如我们要实现一个简单的汽车品牌年龄表,一下写法貌似没有问题。

type Car = 'Audi' | 'BMW' | 'MercedesBenz'

const cars = {
 Audi: { age: 119 },
 BMW: { age: 113 },
 MercedesBenz: { age: 133 },
}

虽然这个写法没问题,但是有没有考虑过类型安全的问题?

比如:

  • 我们忘记写了一个汽车品牌,他会报错吗?
  • 我们拼写属性名错误了,它会报错吗?
  • 我们添加了一个非上述三个品牌的品牌进去,他会报错吗?
  • 我们更改了其中一个品牌的名字,他会有报错提醒吗?

上述这种写法统统不会,这就需要Record的帮助。

type Car = 'Audi' | 'BMW' | 'MercedesBenz'
type CarList = Record<Car, {age: number}>

const cars: CarList = {
 Audi: { age: 119 },
 BMW: { age: 113 },
 MercedesBenz: { age: 133 },
}

当我们拼写错误:

浅谈Vue3.0之前你必须知道的TypeScript实战技巧

当我们少些一个品牌:

浅谈Vue3.0之前你必须知道的TypeScript实战技巧

当我们添加了一个非约定好的品牌进去:

浅谈Vue3.0之前你必须知道的TypeScript实战技巧

在实战项目中尽量多用Record,它会帮助你规避很多错误,在vue或者react中有很多场景选择Record是更优解。

巧用类型约束

在 .jsx 文件里,泛型可能会被当做 jsx 标签

const toArray = <T>(element: T) => [element]; // Error in .jsx file.

加 extends 可破

const toArray = <T extends {}>(element: T) => [element]; // No errors.

交叉类型

交叉类型是将多个类型合并为一个类型。 这让我们可以把现有的多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性。

在 JavaScript 中,混入是一种非常常见的模式,在这种模式中,你可以从两个对象中创建一个新对象,新对象会拥有着两个对象所有的功能。交叉类型可以让你安全的使用此种模式:

浅谈Vue3.0之前你必须知道的TypeScript实战技巧

联合类型

在 JavaScript 中,你希望属性为多种类型之一,如字符串或者数组。这就是联合类型所能派上用场的地方(它使用 | 作为标记,如 string | number)。

function formatCommandline(command: string[] | string) {
 let line = '';
 if (typeof command === 'string') {
 line = command.trim();
 } else {
 line = command.join(' ').trim();
 }
}

类型别名

类型别名会给一个类型起个新名字,类型别名有时和接口很像,但是可以作用于原始值,联合类型,元组以及其它任何你需要手写的类型。

类型别名可以是泛型

type Container<T> = { value: T };

也可以使用类型别名来在属性里引用自己:

type Tree<T> = {
 value: T;
 left: Tree<T>;
 right: Tree<T>;
}

类型别名看起来跟interface非常像,那么应该如何区分两者?

interface只能用于定义对象类型,而type的声明方式除了对象之外还可以定义交叉、联合、原始类型等,类型声明的方式适用范围显然更加广泛。

但是interface也有其特定的用处:

  • interface 方式可以实现接口的 extends 和 implemenjs
  • interface 可以实现接口合并声明
type Alias = { num: number }
interface Interface {
 num: number;
}
declare function aliased(arg: Alias): Alias;
declare function interfaced(arg: Interface): Interface;

此外,接口创建了一个新的名字,可以在其它任何地方使用。 类型别名并不创建新名字—比如,错误信息就不会使用别名。 在下面的示例代码里,在编译器中将鼠标悬停在interfaced上,显示它返回的是Interface,但悬停在aliased上时,显示的却是对象字面量类型。

浅谈Vue3.0之前你必须知道的TypeScript实战技巧

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

Javascript 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
jquery中:input和input的区别分析
Jul 13 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
Apr 08 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
移动端界面的适配
Jan 11 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
webpack 开发和生产并行设置的方法
Nov 08 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
JS字符串补全方法padStart()和padEnd()
May 27 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 #Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 #Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 #Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 #Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 #Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 #Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 #Javascript
You might like
如何给phpadmin一个保护
2006/10/09 PHP
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
jQuery的框架介绍
2016/05/11 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
JavaScript变量作用域_动力节点Java学院整理
2017/06/27 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
Python中的列表知识点汇总
2015/04/14 Python
Saltstack快速入门简单汇总
2016/03/01 Python
Python做文本按行去重的实现方法
2016/10/19 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
Python 文件数据读写的具体实现
2020/01/24 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
《油菜花开了》教学反思
2014/02/22 职场文书
学习决心书范文
2014/03/11 职场文书
出国留学经济担保书
2014/04/01 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python