• TS基本类型

    image.png
    image.pngimage.pngimage.png


    • 字面量:**直接使用字面量进行类型声明**

    字面量:限制变量的值就是该字面量的值,字面量还可以用联合类型表示
    *联合类型:把两个或多个类型连成一个类型(可以使用 | 来连接多个类型)
    image.pngimage.png//此时a报错
    image.png// | 是或
    image.png//最后一行b报错image.png


    • [x] any类型

      1. *any表示的是任意类型,可以任意赋值,一个变量设置类型为any后相当于对该变量关闭了TS的类型检测<br /> *使用TS时,不建议使用any类型,和js没啥区别<br /> *声明变量如果不指定类型,则TS解析器会自动判断变量的类型为any(隐式的any)<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615736680364-9e5ac88b-61ae-4e4c-a15c-c3d18efcd3ce.png#align=left&display=inline&height=99&margin=%5Bobject%20Object%5D&name=image.png&originHeight=99&originWidth=198&size=18960&status=done&style=none&width=198)![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615736741874-19c954e1-ea42-4632-b4a3-e77215986311.png#align=left&display=inline&height=139&margin=%5Bobject%20Object%5D&name=image.png&originHeight=139&originWidth=314&size=44740&status=done&style=none&width=314)//显式any![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615736769754-eb53a6ad-8f65-4971-9b69-c05beb3278d6.png#align=left&display=inline&height=163&margin=%5Bobject%20Object%5D&name=image.png&originHeight=163&originWidth=523&size=81068&status=done&style=none&width=523)//隐式any

    • [x] unknown类型

      1. *但在开发过程中,并不是每个变量都能确定类型,此时建议用unknown类型,<br /> *unknown表示未知类型的值<br /> *以下是unknownany的区别:<br /> +any:给其他变量赋值,其他变量会关闭类型检查<br /> +unknown:虽然可以给自己随意赋值任意类型,但是给其他变量赋值,会报错<br /> ![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615738928553-8da736f7-8af8-4f43-9f19-de2c7240d9c8.png#align=left&display=inline&height=227&margin=%5Bobject%20Object%5D&name=image.png&originHeight=371&originWidth=603&size=77248&status=done&style=none&width=369)//d的类型是any,可以赋值给任意变量,所以赋值给s,不会报错,此时s的类型变成any,类型检查也被关了<br /> ![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615739094425-090ed063-9556-4946-bd6f-e7d6cc8e9e59.png#align=left&display=inline&height=297&margin=%5Bobject%20Object%5D&name=image.png&originHeight=431&originWidth=426&size=87631&status=done&style=none&width=294)//报错,因为此时e虽然被赋值'hello',但是e的类型看的是unknown,是未知的。而s的类型是字符串,无法将e(未知类型)赋值给s(字符串类型),因此会报错。<br /> *unknown实际上就是一个类型安全的any<br /> *unknown类型的变量,不能直接赋值给其他变量<br />如果我就是想把变量e(unknown类型)赋值给变量s(字符串类型),那么赋值之前必须先做类型检查<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615739389482-3f155407-b78b-4bdb-abe7-87ae2426d442.png#align=left&display=inline&height=142&margin=%5Bobject%20Object%5D&name=image.png&originHeight=142&originWidth=378&size=45424&status=done&style=none&width=378)<br /> *或者使用TS的**类型断言**:判断的语言,告诉解析器变量的实际类型<br />(有些时候变量,ts的编译器不知道,但我自己知道类型。所以我们要告诉编译器这些变量是什么类型)<br />( *有些情况下,变量的类型对于我们来说是很明确的,但是ts编译器却并不清楚,此时,可以通过类型断言来告诉编译器变量的类型,断言有两种形式:)<br /> +类型断言的两种写法:<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615786083576-b5d4b844-a281-4d1a-b0c8-01739fac2b4f.png#align=left&display=inline&height=223&margin=%5Bobject%20Object%5D&name=image.png&originHeight=223&originWidth=368&size=38132&status=done&style=none&width=368)![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615906317653-c788501d-1e9f-4578-b6a2-19a1f598d2db.png#align=left&display=inline&height=152&margin=%5Bobject%20Object%5D&name=image.png&originHeight=158&originWidth=390&size=43461&status=done&style=none&width=376)<br /> *当遇到类型不确定的变量的时候,能用unknown就不用any

    • [x] void类型、never类型

      1. *这两个类型在变量的时候用得不多,主要用来设置函数的返回值<br /> ![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615906029056-66e9cff1-2b86-4aae-ace7-9fb6575ef429.png#align=left&display=inline&height=57&margin=%5Bobject%20Object%5D&name=image.png&originHeight=58&originWidth=276&size=9799&status=done&style=none&width=269)<br /> *当函数有/没有返回值:<br /> +当没有设置函数返回值类型的时候,函数返回值类型的自动判断都一定是any类型;<br /> +当函数有返回值的时候,函数会自动判断具体返回值的类型;<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615826140876-089227f9-1085-4a32-a4ee-ae36392ad24f.png#align=left&display=inline&height=72&margin=%5Bobject%20Object%5D&name=image.png&originHeight=72&originWidth=153&size=10930&status=done&style=none&width=153)![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615826130819-bc0601a3-ad86-4949-9590-359257d04454.png#align=left&display=inline&height=130&margin=%5Bobject%20Object%5D&name=image.png&originHeight=130&originWidth=474&size=41699&status=done&style=none&width=474)<br /> +如果函数里没有写return,函数的类型自动判断为void<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615826079725-05aae3e1-8c19-4f3e-845e-c66c38dec4df.png#align=left&display=inline&height=128&margin=%5Bobject%20Object%5D&name=image.png&originHeight=128&originWidth=466&size=39245&status=done&style=none&width=466)<br /> +以下截图证明ts编译器:可以根据返回值情况来判断返回值类型<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615827388295-ddf2a6f8-91e1-47a3-a6c3-ef71432d24c8.png#align=left&display=inline&height=157&margin=%5Bobject%20Object%5D&name=image.png&originHeight=157&originWidth=194&size=27474&status=done&style=none&width=194)![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615827399395-5df134bd-cf55-4972-8caf-5303bb990857.png#align=left&display=inline&height=168&margin=%5Bobject%20Object%5D&name=image.png&originHeight=168&originWidth=463&size=49944&status=done&style=none&width=463)<br /> *ts可以指定返回值类型:但当函数没有返回值的时候<br /> (例如alert函数,console.log函数这种没有返回值类型的函数),<br /> 可以指定函数返回值类型为void,表示空,以函数为例,就表示没有返回值的函数<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615827609340-93474b22-d13f-4d6f-b1bd-13839231655e.png#align=left&display=inline&height=88&margin=%5Bobject%20Object%5D&name=image.png&originHeight=94&originWidth=415&size=28000&status=done&style=none&width=390)//因为指定了void,此时只要有return 一个值就报错了<br /> //但是如果写: return;或者 return undefined;或者return null就不会报错,<br /> //在ts 中这些表示返回值为空

    此时,ts中的never类型:表示永远没有值,永远不会返回结果,连空都没有返回,
    image.png
    image.pngimage.png
    在js中,有一种函数不返回结果,连undefined都不返回,这种函数是用来报错的(throw )
    因为函数一旦报错,代码就会立即结束了,都结束了肯定就没有返回值了,这种函数返回值类型就可以设置为never
    image.png


    • [x] Object类型

      1. *object表示一个js对象,但实际上并不是很实用(因为在js中,对象实在太多:函数,{},,对添加没有限制)<br /> *在想限制一个对象的时候,更想限制的是对象当中包含的哪些属性,而不是限制这个变量是不是一个对象<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615829415191-663f6dd0-4cc0-45e7-96b1-2490e9e689db.png#align=left&display=inline&height=157&margin=%5Bobject%20Object%5D&name=image.png&originHeight=184&originWidth=205&size=31829&status=done&style=none&width=175)//对象a,对象b有什么区别呢??区别如下:对象a用object这样指定没有意义<br /> +而对象b:用{} 可以用来指定对象包含哪些属性:(语法:{属性名:属性值,属性名:属性值……}<br /> =对象b里面可以指定一些属性:let b : {name: string}; //指定对象b包含name 这个属性<br /> -表示变量b指向一个对象,并且这个对象里面得有name这个属性,属性不能多不能少<br /> =如果此时给b赋值一个{ };会报错!<br /> -如左图:因为{ }里没有name这个属性。如果多写了属性也会报错。<br /> -如右图赋值就不会报错。<br /> =如果给属性名后面加个问号?,就表示这个属性可选的,有也可以没有也可以<br /> - let b :{name:string,age?:number};<br /> =如果只要求对象必须有name属性,对于其他很多属性都不做要求,可有可无:<br /> - 因为其他可有可无的属性太多,所以写问号很麻烦<br /> -此时可以用 [propName:string]:any //表示任意类型的属性<br /> (propName表示属性名(可以换其他字母);<br /> string表示propName这个属性名的类型是字符串;属性名是字符串,不是属性是字符串<br /> any表示其他属性是任意类型,如果换成string,表示其他属性必须是string类型<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615829595604-11275e56-a672-4b29-a5c9-7fb3088e71d8.png#align=left&display=inline&height=178&margin=%5Bobject%20Object%5D&name=image.png&originHeight=178&originWidth=408&size=64679&status=done&style=none&width=408)![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615829639363-7aa0a13c-bc6e-45d4-b823-ab5daa778936.png#align=left&display=inline&height=70&margin=%5Bobject%20Object%5D&name=image.png&originHeight=70&originWidth=193&size=16805&status=done&style=none&width=193)<br /> +设置函数结构的类型声明:(用类似箭头可以用来限制对象的函数结构)有几个参数,返回值是什么类型<br /> 语法:(形参:类型,形参:类型,……)=> 返回值类型;<br /> ![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615830766501-f9faf4e4-c636-4e5a-b26a-de7b43f52e96.png#align=left&display=inline&height=42&margin=%5Bobject%20Object%5D&name=image.png&originHeight=42&originWidth=156&size=9295&status=done&style=none&width=156) ![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615830809874-512c96a8-ecf2-4071-9f0d-743ce72a4139.png#align=left&display=inline&height=51&margin=%5Bobject%20Object%5D&name=image.png&originHeight=51&originWidth=333&size=26270&status=done&style=none&width=333)<br /> =左图这样指定对象为函数类型没有啥意义,右边可以限制对象的函数结构<br /> =右图这种语法:类似类型声明:希望d这个函数有两个都是number类型的参数,并且返回值为number类型<br /> ![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615876321275-93de07c6-2039-4347-bb11-a43b0c38a512.png#align=left&display=inline&height=85&margin=%5Bobject%20Object%5D&name=image.png&originHeight=85&originWidth=401&size=37602&status=done&style=none&width=401)<br /> //如果参数个数多了/少了,参数类型变了,函数返回结果类型变了都会报错

    • [x] Array数组类型

      1. *数组需要区分数组里面存的值,但js里面的数组默认是没有类型概念,js数组里想存什么类型都行(这样在开发中存储性能并不是很好)<br /> *数组的类型声明(两种语法):1.let a : 类型[ ]; 2.let a : Array<类型>;<br /> 一个数组里面值的类型都一样:let arrstring[]; string[]表示字符串数组<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615877426768-6e6c7097-e028-416c-9315-331959e0f9d2.png#align=left&display=inline&height=73&margin=%5Bobject%20Object%5D&name=image.png&originHeight=73&originWidth=236&size=21368&status=done&style=none&width=236) ![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615877487382-ffcd88cc-8a76-4f78-b739-5625e7e37eff.png#align=left&display=inline&height=109&margin=%5Bobject%20Object%5D&name=image.png&originHeight=109&originWidth=198&size=23483&status=done&style=none&width=198)//两种写法都可以![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615906108137-5335ef70-fa15-4305-a30c-eabdf55f9593.png#align=left&display=inline&height=64&margin=%5Bobject%20Object%5D&name=image.png&originHeight=70&originWidth=287&size=17805&status=done&style=none&width=261)

    • [x] tuple类型(元组,js里没有的)

      1. *元组:固定长度的数组(存储效果比数组好,因为长度固定,变化的几率少)<br /> *语法:let h: [string,number];//h这个数组有两个变量(第一个是string,第二个是number,不能多不能少<br /> 出错:![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615879530023-d18a42d8-50d6-48fc-be6e-8769b5c523cd.png#align=left&display=inline&height=52&margin=%5Bobject%20Object%5D&name=image.png&originHeight=52&originWidth=228&size=17640&status=done&style=none&width=228)![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615879574307-09214511-69e8-47d9-9e2e-c5a7a90c62f7.png#align=left&display=inline&height=54&margin=%5Bobject%20Object%5D&name=image.png&originHeight=54&originWidth=221&size=19281&status=done&style=none&width=221)

    • [x] enum类型(枚举,js里没有的)

      1. *在处理数据的时候,经常需要有些数据<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615879882016-4a6488fd-2aff-4d90-91cf-19b859f72b4f.png#align=left&display=inline&height=104&margin=%5Bobject%20Object%5D&name=image.png&originHeight=104&originWidth=330&size=25966&status=done&style=none&width=330)//在开发的时候一般不会去这么存这些值,存这些值的目的是为了判断这个对象到底是男的还是女的<br />如果判断这个对象是男的还是女的,可以这样判断:![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615879946359-b2f7aa52-0bde-40fa-9e2a-a52d185a50f9.png#align=left&display=inline&height=27&margin=%5Bobject%20Object%5D&name=image.png&originHeight=27&originWidth=273&size=9145&status=done&style=none&width=273)<br />但是字符串存到数据库里来说相对比较大,而且gender属性只有三个值:男,女,中。像gender值在一定范围之内的,可以不写男女,用number来代替,这样判断、存储比较方便。但最后呈现这些信息的时候也不方便
      2. *语法如下:Enum开头表示定义了给枚举类,这个类名字叫Gender<br /> //左图前面=0的=1是自动补全的不用自己写,但也可以写<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615881022763-566d433f-ebc5-4f47-84ba-a7e094d405bf.png#align=left&display=inline&height=244&margin=%5Bobject%20Object%5D&name=image.png&originHeight=244&originWidth=324&size=50296&status=done&style=none&width=324) ![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615906168454-76fc6461-2e56-48fb-bc4c-6f9fb74e8c24.png#align=left&display=inline&height=311&margin=%5Bobject%20Object%5D&name=image.png&originHeight=376&originWidth=254&size=50310&status=done&style=none&width=210)

    • 或:|、与:&

    两个类型之间可以用 | 连接,表示或
    image.png
    两个类型之间可以用 & 连接,表示且/同时
    image.png//没有意义,因为一个变量不可能既是string又是number类型
    image.png//代表变量j既要满足前面,又要满足后面,name和age都要有,连接两个对象


    • [x] 类型别名

      1. *type 自定义的类型名 = 类型内容;可以简化类型的使用<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615881870113-3f9a9f46-685d-40ae-9637-a50ed96363a6.png#align=left&display=inline&height=204&margin=%5Bobject%20Object%5D&name=image.png&originHeight=204&originWidth=402&size=55292&status=done&style=none&width=402)![image.png](https://cdn.nlark.com/yuque/0/2021/png/12806616/1615881900076-4c5f6077-4a11-4bd9-b41d-a264bdfd4b69.png#align=left&display=inline&height=150&margin=%5Bobject%20Object%5D&name=image.png&originHeight=150&originWidth=278&size=29122&status=done&style=none&width=278)