这篇文章主要介绍“如何理解TypeScript中的子类型、逆变、协变”,在日常操作中,相信很多人在如何理解TypeScript中的子类型、逆变、协变问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何理解TypeScript中的子类型、逆变、协变”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!前言TypeScript 中有很多地方涉及到子类型 subtype、父类型 supertype 的概念,如果搞不清这些概念,那么很可能被报错搞得无从下手,或者在写一些复杂类型的时候看到别人可以这么写,但是不知道为什么他可以生效。子类型比如考虑如下接口:在这个例子中,Animal 是 Dog 的父类,Dog是Animal的子类型,子类型的属性比父类型更多,更具体。在类型系统中,属性更多的类型是子类型。在集合论中,属性更少的集合是子集。也就是说,子类型是父类型的超集,而父类型是子类型的子集,这是直觉上容易搞混的一点。记住一个特征,子类型比父类型更加具体,这点很关键。可赋值性 assignableassignable 是类型系统中很重免费云主机、域名要的一个概念,当你把一个变量赋值给另一个变量时,就要检查这两个变量的类型之间是否可以相互赋值。从这个例子里可以看出,animal 是一个「更宽泛」的类型,它的属性比较少,所以更「具体」的子类型是可以赋值给它的,因为你是知道 animal 上只有 age 这个属性的,你只会去使用这个属性,dog 上拥有 animal 所拥有的一切类型,赋值给 animal 是不会出现类型安全问题的。反之,如果 dog = animal,那么后续使用者会期望 dog 上拥有 bark 属性,当他调用了 dog.bark() 就会引发运行时的崩溃。从可赋值性角度来说,子类型是可以赋值给父类型的,也就是 父类型变量 = 子类型变量 是安全的,因为子类型上涵盖了父类型所拥有的的一切属性。当我初学的时候,我会觉得 T extends {} 这样的语句很奇怪,为什么可以 extends 一个空类型并且在传递任意类型时都成立呢?当搞明白上面的知识点,这个问题也自然迎刃而解了。在函数中的运用假设我们有这样的一个函数:有这样两个变量:调用 f(val1) 是会报错的,比较显而易见的来看是因为缺少属性 b,而函数 f 中很可能去访问 b 属性并且做一些操作,比如 b.substr(),这就会导致崩溃。换成上面的知识点来看,val1 对应的类型是{ a: number },它是 { a: number, b: number } 的父类型,调用 f(val1) 其实就相当于把函数定义中的形参 val 赋值成了 val1, 把父类型的变量赋值给子类型的变量,这是危险的。反之,调用 f(val2) 没有任何问题,因为 val2 的类型是 val类型的子类型,它拥有更多的属性,函数有可能使用的一切属性它都有。假设我现在要开发一个 redux,在声明 dispatch 类型的时候,我就可以这样去做:这样,就约束了传入的参数一定是 Action 的子类型。也就是说,必须有 type,其他的属性有没有,您随意。在联合类型中的运用学习了以上知识点,再看联合类型的可赋值性,乍一看会比较反直觉, ‘a’ | ‘b’ | ‘c’ 是 ‘a’ | ‘b’ 的子类型吗?它看起来属性更多诶?其实正相反,’a’ | ‘b’ | ‘c’ 是 ‘a’ | ‘b’ 的父类型。因为前者比后者更「宽泛」,后者比前者更「具体」。这里 son 是可以安全的赋值给 parent 的,因为 son 的所有可能性都被 parent 涵盖了。而反之则不行,parent 太宽泛了,它有可能是 ‘c’,这是 Son 类型 hold 不住的。这个例子看完以后,你应该可以理解为什么 ‘a’ | ‘b’ extends ‘a’ | ‘b’ | ‘c’ 为 true 了,在书写 conditional types的时候更加灵活的运用吧。逆变和协变先来段维基百科的定义[1]:协变与逆变(Covariance and contravariance )是在计算机科学中,描述具有父/子型别关系的多个型别通过型别构造器、构造出的多个复杂型别之间是否有父/子型别关系的用语。描述的比较晦涩难懂,但是用我们上面的动物类型的例子来解释一波,现在我们还是有 Animal 和 Dog 两个父子类型。协变(Covariance)那么想象一下,现在我们分别有这两个子类型的数组,他们之间的父子关系应该是怎么样的呢?没错,Animal[] 依然是 Dog[] 的父类型,对于这样的一段代码,把子类型赋值给父类型依然是安全的:转变成数组之后,对于父类型的变量,我们依然只会去 Dog 类型中一定有的那些属性。那么,对于 type MakeArray
相关推荐: HTML5中如何解决canvas元素引领下一代web页面的问题
HTML5中如何解决canvas元素引领下一代web页面的问题,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。 初识canvas元素HTML5新增了一个元素canvas,用于绘图使用,其实它的表现和…