写点什么

TypeScript 基础之基本类型检查

用户头像
法医
关注
发布于: 2021 年 09 月 08 日
TypeScript基础之基本类型检查

📌 为什么要使用 TypeScript?


 JavaScript设计之初只是为了补充Java的,在浏览器上做一些小的效果,并不是为了做大型复杂项目而开发的,js 本身也是有很多缺陷的,关于为什么要用 TS,小伙伴们可以瞅瞅这篇文章 :https://xie.infoq.cn/article/40ce1a483b844199a04e08f00

😛 基本类型检查

1. 如何进行类型约束

类型约束其实很简单,只需要在变量函数参数函数返回值位置上加上:类型就可以了。


举个栗子🌰: 变量


//我们定义变量的时候,肯定是知道这个变量是存放什么类型的数据
let name:string = "法医";
复制代码


一旦给 name 赋值其它类型,立马会提示错误



举个栗子🌰: 函数参数和返回值


//参数后面 :number表示传的参数必须是数字类型,而test函数后面的 :number表示返回值是数字类型function test(a:number,b:number):number {    return a + b;}test(1,2);//当调用test函数传值为数字表示可以正常运行,传其它类型则会报错
复制代码


传入字符串就会报错



当我们写一个函数的时候,我们非常清楚函数的参数以及返回值是什么类型的,此时我们可以约束好类型,在之后的调用中我们可以放心的调用函数,因为只要写错了,立马会提示错误,不需要等到程序运行后再提示错误,这些在JS中是做不到的,但是在TS中很轻松可以做到,不仅如此,类型检查还带来很多好处,比方说:


举个栗子🌰:


JS中我们是没有办法确定下面代码中text(1,2)调用的就是一个函数,中途有可能test会被修改,然后调用函数就会报错


function test(a,b) {    return a + b;}// 很多行代码test = 123;// 很多行代码test(1,2);
复制代码



但是在TS中这种情况绝对是不允许的,“呦呦,切克闹,我是 TS,不允许鸭不允许”🙈



由于TS知道函数 test 和调用函数 test 是同一个东西,于是就出现一个神奇的效果——当需要给函数重新命名的时候,双击函数test并且按F2,函数名改了,调用函数名也跟着改了,之所以会达到这个效果,是因为TS有严格的类型检查系统,它知道调用函数的 test 用的就是 test 函数,它们两者之间是建立联系的



不仅如此,还有一种效果:当我们点击调用函数并且按F12,它会跳到定义的函数位置,



为了让我们少写点代码,使用TS进行约束的时候,TS 在很多场景中可以完成类型推导


举个栗子🌰:


当我们把函数返回值约束去掉以后依然可以从提示中发现返回值是number,这是因为我们将参数约束为number,数字与数字相加依然是数字,所以最后函数也会返回number,赋值给变量 result,TS还会智能地发现函数返回的结果是number,所以result类型也是number,因此我们只需要在参数位置加上类型约束就可以了,TS在每个地方都有类型检查,是不是很牛逼🐮



📢 紧急通知: 翠花小姐姐来了


翠花小姐姐提了一个问题:我怎么知道这类型推导什么时候能推导成功,什么时候推导失败呢?


👉 解答:


有个小技巧,当我们看到变量或者函数的参数出现三个小点,这三个点就是在提醒:你给我当心点,我确实做不到了,表示当前没有推导出来到底是什么类型,可以用any类型来表示,这时就需要手动约束一下,



any:表示任意类型,对该类型,TS 不进行类型检查


看到这,我想大家已经知道TS有非常强大的类型检查系统,那么有个小问题


😱 灵魂一问: 请问手机号应该定义成数字还是数字字符串


📢 如何区分数字字符串和数字,关键看怎么读?如果按照数字的方式朗读,则为数字,反之为字符串


举个栗子🌰:



帅哥一听,唉呀妈呀,再不走桃花运被你耽搁了,赶紧拿出电话小本本,小心谨慎地生怕念错一个数字,1315258,3720,平常我们都是这么念的,没有人念一百三十一亿五千二百五十八万三千七百二吧😂,妹子要听了,滚~~,活该你单身!😭

2. 基本类型

注意是首字母是小写


  • number:数字,


    let figure:number = 6;
复制代码


  • string:字符串


    let user:string = "法医";
复制代码


  • boolean:布尔值


    let fake:boolean = false;
复制代码


  • array:数组

:number[]这种写法其实是语法糖,真正的写法是下面第二种,这两种写法都可以约束数组的,看个人喜好,建议使用第一种,因为在 react 中尖括号表示组件,Array<number>可能会造成冲突


     //     let arr:number[] = [1,2,3];
let arr:Array<number> = [1,2,3];
复制代码


  • object:对象

object约束不是很常用,因为object约束力不是很强,它只能约束一个对象,却不能约束对象里面的内容,但是有时会用到


     //传入一个对象,输出value值    function getValues(obj:object) {        let vals = Object.values(obj);        console.log(vals); // 输出 法医  18       }    getValues({        name:"法医",        age:18    })
复制代码


  • null 和 undefined

nullundefined需要重点说一下,nullundefined是所有其他类型的子类型,它们可以赋值给其它类型,但是又会发生隐患,下面方法调用都会报错,由于约束了是stringnumber,但是值又是nullundefined,这种情况是我们不希望发生的。


    let str:string = null;    let nums:number = undefined;        //下面都会报错,由于约束了是string和number,但是值又是null和undefined    str.toLocaleUpperCase();    nums.toString();
复制代码


👉 解决方案:


在`tsconfi.json`配置文件中加上:`"strictNullChecks": true`之后可以获得更加严格的空类型检查,`null`和`undefined`就不能赋值给其它的了
![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8dfc27334d8948708b55f257675037e7~tplv-k3u1fbpfcp-watermark.image)
复制代码

3. 其它常用类型

  • 联合类型:多种类型任选其一


当一个变量既可以为字符串又可以为undefined的时候就可以使用联合类型,它可以配合使用类型保护进行判断


  • 📢 类型保护:当对某个变量进行类型判断之后,在判断的语句中便可以确定它的确切类型,tyoeof 可以触发类型保护,但是它只能触发简单基本的类型保护,复杂类型是没有办法触发的


    let user:string | undefined;
if(typeof user === "string"){ //类型保护,当进入这个判断,TS一定会知道,此时user一定是字符串 }
复制代码


  • viod 类型:通常用于约束函数返回值,表示该函数没有任何返回

viodJs也是有的,表示运算一个表达式之后返回 undefined,但在TS意思是不同的,通常用于约束函数返回值,表示该函数没有任何返回


    function user():void{        console.log("法医");    }
复制代码


当然不约束也是可以的,因为会`类型推导`出来
![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/606de9b10f71449a94cada2232cfded4~tplv-k3u1fbpfcp-watermark.image)
复制代码


  • never 类型:通常用于约束函数返回值,表示该函数永远不可能结束


    function thorwError(msg:string) {        throw new Error(msg)    }
复制代码


这个函数的`类型推导`是有问题的,推导的类型是`viod`,因为它永远不会结束,类型应该是`never`而不是`viod`,所以需要手动更改
![GIF 2021-9-8 16-37-29.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/71d428e36aaf4562a91eac8747a741cb~tplv-k3u1fbpfcp-watermark.image)
复制代码


    function thorwError(msg:string):never {        throw new Error(msg)    }
复制代码


由于是永远不会结束,所以,下面的log函数无法执行,无法访问代码
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5b4441eb057046d39b3ecc18898fa130~tplv-k3u1fbpfcp-watermark.image)
还有一种情况也是永远不会结束,需要手动约束
![GIF 2021-9-8 16-53-09.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9377726f8fee42159d70140d0f23b654~tplv-k3u1fbpfcp-watermark.image)
复制代码


  • 字面量类型:使用一个进行约束,而不是类型约束


    //表示从此以后,变量name只能是 “法医”,别的就会报错    let name:"法医";
复制代码


![GIF 2021-9-8 17-18-55.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5e0cde8988b24cb2b860f757236549be~tplv-k3u1fbpfcp-watermark.image)
一般我们可以用字面量类型对性别或者对象中的属性进行约束:
复制代码


    //对gender 变量进行约束,只能是男或女,其它不行    let gender :"男" | "女";        //对users对象中的name和age属性分别约束为字符串和数字,下次给users赋值的时候,只能包含name和age    let users:{        name:string        age:number    }
复制代码


  • 元组类型(Tuple):用的不多,了解一下就可以了,表示固定长度的数组,并且数组中的每一项类型确定


    //定义了一个变量为tupleType的数组,这个数组只能有两项,并且第一个必须为字符串,第二个必须为数字    let tupleType:[string,number];        //第一项必须为字符串,第二项必须为数字,只能有两项,否则报错    tupleType = ["法医",5];
复制代码


  • any 类型:any 类型可以绕过类型检查,因此 any 类型可以赋值给任意类型,但肯定是有隐患的,因为它无法使用 TS 提供的保护机制,所以不建议随意的使用any类型,为了解决 any 带来的问题,TS3.0引入了unknown类型



4. 类型别名

给已知的类型起个新的名字,防止重复书写一些代码


type Gender = "男" | "女";type user = {    name:string    age:number    gender:Gender}
function getUser(g:Gender) { //...}
复制代码

5. 函数的相关约束

  • 函数重载


先看一个函数combine,功能是如果传递两个数字作为参数的时候相乘,传递两个字符串的时候相加,不相同都会报错。


function combine(a:number | string,b:number | string):number | string {    if(typeof a === "number" && typeof b === "number"){        return a * b;    }    else if(typeof a === "string" && typeof b === "string"){        return a + b;    }    throw new Error("a和b必须是相同的类型")}
复制代码


函数本身没有什么问题,问题就发生在函数调用的过程中,当我们代码写多了以后,我们也许会失误传递不同的类型作为参数,更可怕的是如果参数是函数的返回结果,那就更蒙了,因此,在函数的调用过程中最好告诉调用函数,要么都是数字类型,要么都是字符串类型。



从逻辑上来说,都是数字的话返回的结果就是数字类型,都是字符串的话返回的结果就是字符串类型,然而result的类型是string | number,上图可以清晰看到,这种情况,后面就没有办法使用result变量了,因为明明知道都是数字返回的结果一定是数字类型,都是字符串返回的一定是字符串类型。意味着代码提示中不会出现所有数字拥有的方法或者所有字符串所拥有的方法,只会提示数字和字符串共同拥有的方法——toStringvalueOf如下图:



👉 解决方案:


加上下面两句代码,这两句代码相当于告诉 TS combine函数只能有两种情况,一种是两个数字返回数字,另一种是两个字符串返回字符串,这两句代码就叫函数重载


📢 函数重载:在函数实现之前,对函数调用的多种情况进行声明。


//加上这两句代码/** * 得到a * b的结果 * @param a  * @param b  */function combine(a:number,b:number):number;/** * 得到a + b的结果 * @param a  * @param b  */function combine(a:string,b:string):string;
function combine(a:number | string,b:number | string):number | string { if(typeof a === "number" && typeof b === "number"){ return a * b; } else if(typeof a === "string" && typeof b === "string"){ return a + b; } throw new Error("a和b必须是相同的类型")}
let result = combine("b","n");
复制代码


使用函数重载之后,当调用函数的时候只能传两个数字或者两个字符串,否则会报错,再来看看效果:



  • 可选参数


📢 可选参数:可以在某些参数名后面加上号,表示该参数可以不用传递。可选参数必须要在参数列表的末尾



当形参为三个,调用函数却传了两个,就会报错,TS 是很严格的,不允许参数数量不匹配。假设第三个参数可以不传递,加个号表示是可选参数


😛 结束语


写完又是深夜了,TS 的基础之基本类型检查就写完了,本来想着把 TS 基础部分整理成万字文再分享给大家的,但又觉得篇幅过长阅读不便,那就慢慢更新吧,9 月份不出意外的话基本上每天会更新一篇,有任何疑问可以留言,小伙伴们点个赞 👍 关注➕再走吧!~ 😘,我会更有动力的,晚安! 🤞

发布于: 2021 年 09 月 08 日阅读数: 17
用户头像

法医

关注

公众号@前端猎手 2020.07.17 加入

我是法医,一只治疗系前端码猿🐒,与代码对话,倾听它们心底的呼声,期待着大家的点赞👍与关注➕。 [微信:wKavin]

评论

发布
暂无评论
TypeScript基础之基本类型检查