浅谈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 相关文章推荐
jQuery(非HTML5)可编辑表格实现代码
Dec 11 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
深入理解javascript中return的作用
Dec 30 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
跟我学习javascript的函数和函数表达式
Nov 16 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
通过js实现压缩图片上传功能
Feb 25 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
PHP+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
python web框架中实现原生分页
2019/09/08 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
大学生怎样进行自我评价
2013/12/07 职场文书
初三班主任寄语大全
2014/04/04 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
职工培训工作总结
2015/08/10 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
Python函数中的不定长参数相关知识总结
2021/06/24 Python