TypeScript彻底解读(26课时)_12.TypeScript彻底解读-高级类型(1)

12.TypeScript彻底解读-高级类型(1)css

高级类型中文网的地址:https://typescript.bootcss.com/advanced-types.htmlhtml

  

建立新的测试文件es6

index.ts内引入typescript

交叉类型

交叉类型就是取多个类型的并集npm

Object.assign就是合并两个对象,包含两个对象各有的属性,合成一个总的对象json

定义的函数也是接收两个对象,最后返回两个对象合并后的结果。数组

返回值里既包含arg1,也包含了arg2的属性dom

因此返回的类型就能够用交叉类型来返回: T & U函数

res是个数组因此这里返回res确定是不对的。测试

这里须要使用类型断言

调用这个方法传进去两个对象,最终返回的是两个对象合并后的对象,因此这里再经过点.就能够把a和b这两个属性都点出来了

这就是交叉类型,能够理解为与的一个操做

联合类型

这样就表示当前这个类型几课时type1也能够是type2还能够是type3,只要是其中的一种就能够

这里先判断是不是string类型,若是是stirng类型就返回它的length,若是不是string类型,就先tostring 一下而后再返回它的的length

那么这里既能够是stirng类型,也能够是number类型

 

传入布尔类型那么就会报错了。这就是联合类型

类型保护

ts在编译阶段就会帮咱们监察错误,有些数据只有在代码运行以后才能知道结果

Math.random()是0到1的随机数,乘以10就是0到10的

item的值是随即的不固定的,这个值在编译阶段是没法肯定是哪一个类型的值的

因此有时候就须要先判断他的类型

这里判断item的length,length属性是stirng类型才有的,若是是string类型就返回它的length,若是是number类型那么就返回它的toFixed方法。可是这里报错了

报的错误

咱们选中getRandomValue方法代码块。看到它返回的是一个stirng或者number的联合类型。

这里的itme也是stirng或者是number类型,这段逻辑在js是没有问题的 可是在ts中是有问题的,它会监测item的类型,

因此这个时候咱们就要用到类型保护

若是不用类型保护的话,也可使用类型断言,这个地方有个缺点,就是多个地方只要用到这个item的地方就要使用类型断言  

因此咱们可使用类型保护

返回值的类型是value is string。看上去像是一句话。用is表示返回值的类型

 

把鼠标放到item上看一下,这里已经判断出了这是一个stirng类型。就是经过类型保护ts知道了item是一个stirng类型,那么if代码块里面的item都是一个stirng类型

既然你的值要么是numer要么是string类型,if是string类型了。 那么else里面自动判断出是number类型的.这个要比类型断言使用起来方便多了。可是上面多定义了一个函数

函数里面咱们就定义了一个判断,是不用定义一个函数这么复杂的,定义函数去判断适合逻辑比较复杂的类型的判断

这里简单的类型判断,咱们可使用第二种方式typeof

typeof在js里面是有这个关键词的,能够判断值的类型

在ts中 会把typeof item当作一个类型保护。可是这个类型保护只能登过这种 === 等号或者!== 不等于这种形式来定义来比较。

在js中能够用includes判断一个字符串或者数组里面是否包含某个指定的东西

typeof 在ts中只能作等或者不等的操做不会把这段include的识别为类型保护的,后面的逻辑也不会判断出item是什么类型的

typeof后面要比较的类型,必须这四种的一种:string、number、boolean、symbol

valueList这里咱们修改一下

item的类型就是一个空的对象

这里用typeof判断object类型

因此后面的判断不会准确的判断

你能够这么写,可是不会被识别为类型保护

 

instanceof类型保护

instanceof也是js中的原生操做符,判断一个实例是否是某个构造函数建立的实例。或者是否是使用es6语法的某个类建立的

在ts中使用instanceof一样具备类型保护的效果

getRandomItem随机数,若是小于0.5就建立class1的实例,若是不是 就建立class2的实例

使用instanceof类型保护,

 

null和undefined

是任何类型的子类型

这里定义values默认是123会自动推断出来是string类型

可是其实这里的类型默认状况下至关因而一个strng | undefined的联合类型

values给他赋值一个undefined也是能够的。就是上面上面定义的时候至关于string和undefined的联合类型了。因此在ts中有严格模式

ts.config内有严格模式能够打开,默认是关闭的。这里打开这个选项

打开以后,把undefined赋值给values就会报错了。values是stirng类型,这里就不能再把undefined赋值给values了

ts会将null和undefined区别对待,这和js里也是一致的

下面   这三种是彻底不一样的类型

当开启了ts的属性strickNullChecks设置为true了

可选参数会被自动加上undefined,成为一个联合类型。ts会自动作这么一个处理

可选属性也是会被加上undefined的 这里不在举例

修改了tsconfig.json之后,必定要把项目停掉,从新编译项目npm start

类型保护和类型断言

当咱们的参数或者属性类型是联合类型或者any类型这种不惟一的类型时,咱们就可能须要使用类型保护来作一些类型的判断

定义函数,函数的返回值类型是number

 精简代码。若是value是null这里使用 || 会隐式转换成false,false的话就会走后面的 空字符串的逻辑,

当value是null的时候,就会总体返回那个空字符串,而后空字符串再取length的值那么就是0

这里用了一个嵌套函数,里面又套了一个函数getRes()

若是num是null就会隐式转换为false 就会取0.1,若是num不为null那么就默认返回num的值

这里报错了,num可能为null,当num为null 的时候就不能调用toFixed方法了。由于有嵌套函数,编译器是没法去除嵌套函数的null的

因此这里咱们就要使用类型断言,用叹号在不为null的值的后面。

在num的值的后面加叹号

先取整,再toString

类型别名

就是给一种累心起一个别的名字,以后只要使用这个类型的时候,均可以用这个新的名字,做为类型的代替。

只要你想指定类型是stirng的地方,均可以使用TypeString来指定

例如这里,我本来是要指定str2是string类型

如今我就能够全完用TypeString来代替

类型别名也可使用泛型,这里用type会报错,须要tsconfig设置interface-over-type-literal:false才能够。要否则这里只能用interface接口

设置为false:interface-over-type-literal:false。本身开发项目仍是建议开启。

 

使用类型别名的时候,也能够在属性引用本身

child属性用了他本身自己,其实就是定义了一种树状的结构

一层一层的嵌套下去

只能够在对象属性中引用类型别名本身。不能直接使用本身。下面这种就会报错了

类型别名只是为其余类型起了新的别名来引用这个类型,因此当它为接口起别名时不能使用extends和implements

接口和类型别名有时 是起到同样的做用的

下面先定义一个类型别名,在定义一个接口,里面都只有属性num属性为number类型,在定义_alias我能够指定类型是Alias类型别名

同时也能够指定_alias指定为接口类型达到了一样的效果

接口的实例赋值给类型别名的实例,这里是能够的 没有报错

何时用类型别名,何时使用接口?

刚才的例子咱们使用类型别名会自动转为接口,tsconfig.json内这里设置为false了才可使用的类型别名

当你定义的类型要用于扩展要用implements来修饰的时候用接口。当没法经过接口,而且须要使用联合类型或者元祖类型的时候用类型别名

自变量类型

自变量包含字符串自变量和数字自变量两种

经过type制定Name是字符串自变量类型

制定name3类型为Name,Name是Lison这个字符串的字符串自变量。因此我给name3赋值Lison这个字符串是没问题的

若是给赋一个别的值

还可使用联合类型来使用多个字符串。

Direction就是后面四个字符串的字符串自变量构成的一个联合类型

返回传的参数的首字母

 

在调用方法的时候,这里就列出来了智能选择这四个做为参数

 

传值哈哈就会报错了

数字自变量

定义数字自变量Age为18.

再定义一个接口,里面的属性age是自变量类型Age ,其实就是规定了智能是18

那么在_info继承了接口后,age的值必须是18若是不是就会报错了

枚举成员类型

可以作类型使用的枚举要符合三个条件

1.不带初始值的枚举成员

2.成员的值为字符串自变量。

3.值是数值自变量或者带有一个负号的数值自变量

以上三种知足一个就能够。那么这个枚举值和他的枚举成员均可以作为类型来使用

可辨识联合类型

能够把单例类型,联合类型、类型保护、类型别名,这几种类型合并,建立一个可辨识联合的高级类型,也能够成为标签联合或者代数数据类型

可辨识联合要求具备两个要素

1.具备普通的单例类型属性

2.一个类型别名包含了哪些类型的联合(也就是把几个类型封装为联合类型而且起个别名)

shapes是三个接口的联合

在写代码的时候,当判断了是什么类型,自动把接口内的属性自动提示出来了

三个接口内都有特征,kind而且值都不同,因此用kind来作特征

shape别名包含了三个接口的联合

定义函数的时候制定类型就是shape这个联合类型。在写switch的时候,经过编译s.kind这个可辨识的特征。咱们在写下面的代码时候,ts已经帮咱们判断出了每一个分支的条件均可觉得(二声)什么

当咱们case判断是square,他会判断s就是Square这个接口的类型,会把你能够访问的属性给你列出来。这就是一个能够辨识的联合

幂运算,一个星号是乘以,两个星号就是幂运算。这就是圆的半径的平方。幂运算我听着视频说的不是很清楚,多是ES7的语法

一共三种类型,这里若是漏了 但愿编译器给予提示

就要用到下一个知识点。什么什么检查。

两种检查方式,

先肯定这个属性是不是true,打开的

指定返回类型,若是遗漏了就会报错

若是没有开tsconfig.json内的strictNullCheck。这里的返回值类型能够设置为undefined.编译器会自动认为这里返回值类型是个联合类型number或者undefined

既然开了strictNullCheck已经设置为true了,就是打开了。这里的分支没有任何一条执行,就会返回undefined。undefined和number是不能赋值的。因此这里我就知道少了一个分支。

这种方法比较简单,可是对旧的代码支持很差。由于之前没有strictNullCheck这个选项

第二种方法:

当一个函数返回错误,坐着不可能有返回值类型的时候,返回值的类型为never,因此咱们能够给switch添加一个default

先把这个注释掉

关掉后,这里就不报错了

须要定义一个额外的函数,接收参数是never类型,返回值类型也是never。而后在switch里面加一个default的分支。

若是缺乏了一个项,就会走定义的函数assertNevert函数,就会提示报错 。

不只在编译器提示咱们错误运行的时候也会报错。

相关文章
相关标签/搜索