TypeScript的枚举与类型约束

　　上一章我们讲了TS的接口
　　这一章，我们就来聊一聊TS的枚举和约束枚举认识枚举
　　在很多计算机语言中都有枚举的概念，但是JS中是没有枚举这个概念的，为了弥补这个缺憾在TS加入了枚举类型
　　什么是枚举呢？
　　枚举（meiju）：枚举的意思就是一一列举，把所有情况都列举出来，那么取值的时候，只有这几个可以使用，其他的都不行
　　计算机语言里面的枚举（enumerations）：把所有的常量放在一个集合内，让若干个常量变成一组有关联的内容
　　针对一个业务逻辑，我需要频繁用到四个方向的字符串constUPupconstRIGHTrightconstDOWNdownconstLEFTleft
　　对于以上四个变量来说
　　我不管做任何逻辑，我没办法限制你只能使用这四个变量中的一个封装一个功能函数functionutil（dir）｛｝
　　不管用什么方法，你都没办法限制这个dir参数接收到的必须是上面列出的四个方向
　　这个时候，我们就可以用到枚举了
　　首先，在TS中，利用enum关键字创建一个枚举集合，把我们需要的四个常量放进去enumDirection｛UPup，RIGHTright，DOWNdown，LEFTleft｝
　　制作了一个DIrection枚举集合，那么就可以用这个集合来对某些数据进行限制了functionutil（dir：Direction）｛｝
　　这就约定了，dir这个参数的值只能是Direction这个枚举集合里面的常量，其他都不行
　　只要你写的不是Direction这个枚举内的内容都不行数字枚举
　　数字枚举：枚举类型中的每一个常量都是数字
　　在TS中，枚举内的每一个常量，当你不设置值的时候，默认就是number类型enumPages｛ONE，0TWO，1THREE2｝
　　你在枚举内的常量，第一个默认值是0，后面的依次1递增
　　此时
　　Pages。ONE0
　　Pages。TWO1
　　Pages。THREE2
　　我们也可以自己指定值enumPages｛ONE10，10TWO20，20THREE3030｝
　　这个时候枚举集合内的常量就是我们指定好的值
　　我们也可以指定部分值enumPages｛ONE10，10TWO，11THREE12｝
　　指定常量后面的未指定常量，就会按照1的规则一次递增
　　enumPages｛ONE，0TWO10，10THREE11｝enumPages｛ONE，0TWO10，10THREE，11FOUR30，30FIVE31｝字符串枚举
　　字符串枚举：枚举集合中的每一个常量的值都是string类型
　　在TS内，你必须要指定一个值，才可能会出现string类型enumDirection｛UPup，RIGHTright，DOWNdown，LEFTleft｝
　　在TS中，枚举常量和任何内容都是不一样的，包括原始字符串functionutil（dir：Direction）｛｝
　　这是因为，在TS中，枚举内的每一个常量都是一个独一无二的值
　　所以当你用枚举去限定一个数据的时候，用的时候也只能用枚举内的值
　　这样也避免你因为手误出现的单词错误，比如你会不会认为form和from是一个单词呢异构枚举
　　异构枚举：其实就是在一个枚举集合内同时混合了数字枚举和字符串枚举
　　但是你大概率是不会这样使用的，因为我们作为一组数据的集合，一般不会把数字和字符串混合在一起使用enumInfo｛ONE，UPup，TWO2，LEFTleft｝
　　在这里有一个点需要注意
　　因为在枚举集合内，当某一个key你没有设置值的时候，会默认按照上一个的值1
　　所以如果前一个是字符串枚举，那么下一个必须要手动赋值，不然会报错
　　如果前一个是数字枚举，那么下一个可以不必要手动赋值，会按照上一个1计算枚举合并
　　在TS内的枚举，是支持合并的
　　多个枚举类型可以分开书写，会在编译的时候自动合并enumDirection｛UPup，RIGHTright，DOWNdown，LEFTleft｝enumDirection｛TOPtop，BOTTOMbottom｝functionutil（dir：Direction）｛｝util（Direction。BOTTOM）util（Direction。LEFT）
　　这里定义的两个枚举都叫做Direction，会在编译的时候自动放在一起，不会出现冲突反向映射
　　TS内的数字枚举，在编译的时候，会同时将key和value分别颠倒编译一次enumPages｛ONE，0TWO，1THREE2｝
　　以这个为例，他是如何进行编译的呢varPages；（function（Pages）｛Pages〔Enum〔ONE〕0〕ONEPages〔Enum〔TWO〕1〕TWOPages〔Enum〔THREE〕2〕THREE｝）（Pages（Pages｛｝））；
　　编译完毕的结果Pages｛ONE：0，TWO：1，THREE：2，0：ONE，1：TWO，2：THREE｝
　　也就是说，我们在TS内使用的时候，如果是数字枚举
　　那么我们可以通过key得到对应的数字，也可以通过对应的数字得到对应的keyenumPages｛ONE，0TWO，1THREE2｝console。log（Pages。ONE）0console。log（Pages。TWO）1console。log（Pages。THREE）2console。log（Pages〔0〕）ONEconsole。log（Pages〔1〕）TWOconsole。log（Pages〔2〕）THREE常量枚举
　　常量枚举，是在枚举的基础上再加上const关键字来修饰
　　会在编译的时候，把枚举内容删除，只保留编译结果
　　并且对于数字枚举来说，不在支持反向映射能力，只能利用key来访问
　　非常量枚举enumPages｛ONE，0TWO，1THREE2｝console。log（Pages。ONE）console。log（Pages。TWO）console。log（Pages。THREE）
　　编译完毕的js文件
　　常量枚举constenumPages｛ONE，0TWO，1THREE2｝console。log（Pages。ONE）console。log（Pages。TWO）console。log（Pages。THREE）
　　编译完毕的js文件
　　类型约束
　　在TS中，还有一个很神奇的关键字，叫做type
　　type又叫做类型别名有很多神奇的功能，不仅能支持interface定义的对象结构，还支持任何手写类型
　　先来看一个很简单的例子
　　letn1：numberstringbooleanletn2：numberstringbooleanletn3：numberstringboolean
　　观察上面一段代码，我们定义了n1和n2和n3三个变量
　　对于类型的限制都是number或者string或者boolean
　　写起来的时候就非常麻烦
　　这个时候，我们就可以使用type对其进行别名设置typeInfonumberstringbooleanletn1：Infoletn2：Infoletn3：Info
　　这样一来，我们的代码是不是变得简洁了起来
　　可能小伙伴们认为这个用的并不多，但是type也不是只有这一个功能type的常见使用
　　基本类型的别名typennumberletnum：n100
　　这是一个非常基础的使用，把number这个类型起了一个别名叫做n
　　今后再用n来限制变量的时候，其实就是在使用number
　　基本类型联合typeinumberstringletstr：i千锋大前端str100
　　这就是联合类型，那number或者string这个类型齐了一个别名叫做i
　　我们再用i来限制变量的时候，这个变量就被限制为了number或者string
　　对象类型typeUser｛name：string，age：number｝letperson：User｛name：千锋大前端，age：10｝
　　这就是对象类型，和interface很像，用处基本一致
　　对象联合类型typeUser｛name：string，age：number｝typePersonUser｛gender：boolean｝letperson：Person｛name：千锋大前端，age：10，gender：true｝
　　这就是对象联合类型，和interface的extends继承很像
　　元组类型typedata〔number，string〕letinfo：data〔10，千锋大前端〕
　　常量限定typecoloryelloworangebluefunctionutil（c：color）｛｝util（yellow）
　　这个color被限定为了几个值，将来用color去约束一个变量的时候
　　这个变量只能接受这几个值，这里和enum比较像了
　　type和interface的共同点
　　1。都可以约束对象或者函数类型
　　interfaceinterfaceUser｛name：string；age：number｝interfaceFunc｛（x：number）：number｝
　　typetypeUser｛name：string；age：number｝typeFunc（x：number）number
　　我们看到，两个定义方式略有区别，但是后期用法基本一致
　　2。扩展类型
　　interface使用extends进行继承interfacePerson｛name：stringage：number｝使用extends关键字继承自PersoninterfaceStudentextendsPerson｛classRoom：number｝lets：Student｛name：千锋大前端，age：10，classRoom：1｝
　　type使用交叉（）来实现typePerson｛name：stringage：number｝使用交叉（）typeStudentPerson｛classRoom：number｝lets：Student｛name：千锋大前端，age：10，classRoom：1｝
　　3。联合类型
　　interface使用extends继承typetypePerson｛name：stringage：number｝使用extends关键字继承自PersoninterfaceStudentextendsPerson｛classRoom：number｝lets：Student｛name：千锋大前端，age：10，classRoom：1｝
　　type使用交叉（）扩展interfaceinterfacePerson｛name：stringage：number｝使用交叉（）typeStudentPerson｛classRoom：number｝lets：Student｛name：千锋大前端，age：10，classRoom：1｝type和interface的区别
　　1。interface支持多次声明自动合并，type不支持interfaceUser｛name：stringage：number｝interfaceUser｛classRoom：string｝真实的User接口｛name：stringage：numberclassRoom：string｝
　　type如果声明重名标识符会报错
　　2。对于ES6模块化语法的默认导出语法
　　interface支持声明的同时进行默认导出exportdefaultinterfaceUser｛name：stringage：number｝
　　type必须先声明，在默认导出typeUser｛name：stringage：number｝exportdefaultUser
　　必须要先声明好，在进行默认导出，如果直接连写默认导出，会报错
　　3。type可以使用typeof关键字去获取某一数据类型letboxdocument。querySelector（。box）typeEleTypetypeofbox
　　这里定义了一个EleType标识符，会自动根据typeof关键字检测的box的类型限制
　　4。type支持使用in关键字去遍历成映射类型typenamesfirstNamelastNameAKAtypenameType｛〔keyinnames〕：string｝真实的nameType类型｛firstName：stringlastName：stringAKA：string｝