嗨！大家好！我是法医，一只医治系前端码猿，与代码对话，聆听它们心底的呼声，期待着大家的点赞与关注➕。

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晓得函数test和调用函数test是同一个货色，于是就呈现一个神奇的成果——当须要给函数重新命名的时候，双击函数test并且按F2，函数名改了，调用函数名也跟着改了，之所以会达到这个成果，是因为TS有严格的类型查看零碎，它晓得调用函数的test用的就是test函数，它们两者之间是建立联系的

不仅如此，还有一种成果：当咱们点击调用函数并且按F12，它会跳到定义的函数地位，

为了让咱们少写点代码，应用TS进行束缚的时候，TS在很多场景中能够实现类型推导

举个栗子：

当咱们把函数返回值束缚去掉当前仍然能够从提醒中发现返回值是number，这是因为咱们将参数束缚为number，数字与数字相加仍然是数字，所以最初函数也会返回number，赋值给变量result，TS还会智能地发现函数返回的后果是number，所以result类型也是number，因而咱们只须要在参数地位加上类型束缚就能够了，TS在每个中央都有类型查看，是不是很牛逼

那问题来了：我怎么晓得这类型推导什么时候能推导胜利，什么时候推导失败呢？

解答：

有个小技巧，当咱们看到变量或者函数的参数呈现三个小点，这三个点就是在揭示：你给我当心点，我的确做不到了，示意以后没有推导进去到底是什么类型，能够用any类型来示意，这时就须要手动束缚一下，

any：示意任意类型，对该类型，TS不进行类型查看

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

    null和undefined须要重点说一下，null和undefined是所有其余类型的子类型，它们能够赋值给其它类型，然而又会产生隐患，上面办法调用都会报错，因为束缚了是string和number，然而值又是null和undefined，这种状况是咱们不心愿产生的。

      let str:string = null;  let nums:number = undefined;    //上面都会报错，因为束缚了是string和number，然而值又是null和undefined  str.toLocaleUpperCase();  nums.toString();

    解决方案：

    在tsconfi.json配置文件中加上："strictNullChecks": true之后能够取得更加严格的空类型查看，null和undefined就不能赋值给其它类型了，只能赋值给本身

3. 其它罕用类型

  • 联结类型：多种类型任选其一

    当一个变量既能够为字符串又能够为undefined的时候就能够应用联结类型，它能够配合应用类型爱护进行判断

    类型爱护：当对某个变量进行类型判断之后，在判断的语句中便能够确定它的确切类型，tyoeof能够触发类型爱护，然而它只能触发简略根本的类型爱护，简单类型是没有方法触发的
    let user:string | undefined;if(typeof user === "string"){    //类型爱护，当进入这个判断，TS肯定会晓得，此时user肯定是字符串}

  • viod类型：通常用于束缚函数返回值，示意该函数没有任何返回

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

    function user():void{    console.log("法医");}

    当然不束缚也是能够的，因为会类型推导进去

  • never类型：通常用于束缚函数返回值，示意该函数永远不可能完结

    function thorwError(msg:string) {    throw new Error(msg)}

    这个函数的类型推导是有问题的，推导的类型是viod，因为它永远不会完结，类型应该是never而不是viod，所以须要手动更改

      function thorwError(msg:string):never {   throw new Error(msg)  }

    因为是永远不会完结，所以，上面的log函数无奈执行，无法访问代码

    还有一种状况也是永远不会完结，须要手动束缚

  • 字面量类型：应用一个值进行束缚，而不是类型束缚

    //示意从此以后，变量name只能是 “法医”，别的就会报错let name:"法医";

    个别咱们能够用字面量类型对性别或者对象中的属性进行束缚：

    //对gender 变量进行束缚，只能是男或女，其它不行let gender :"男" | "女";//对users对象中的name和age属性别离束缚为字符串和数字，下次给users赋值的时候，只能蕴含name和agelet 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变量了，因为明明晓得都是数字返回的后果肯定是数字类型，都是字符串返回的肯定是字符串类型。意味着代码提醒中不会呈现所有数字领有的办法或者所有字符串所领有的办法，只会提醒数字和字符串独特领有的办法——toString和valueOf如下图：

解决方案：

加上上面两句代码，这两句代码相当于通知 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是很严格的，不容许参数数量不匹配。假如第三个参数能够不传递，加个？号示意是可选参数