您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

Typescript - 怎么理解协变和逆变

时间:2022-08-17 14:07:59  来源:今日头条  作者:Web技术前沿

 

首先协变(Covariance)和逆变(contravariance),这俩概念不是TS特有的,很多有类型系统的语言都有一样的概念,比如C#,JAVA等。要理解这两个概念,让我们先建立几个类,然后再详细说明,如下:

 

代码很直观,建立了3个类,动物,狗,黄狗,它们之间的继承关系是,动物(Animal)类是基类,狗(Dog)继承自动物类,黄狗(YellowDog)继承自狗类。Animal <- Dog <- YellowDog 它们每个类都有各自特有的属性。

接下来,我们来为每个类创建一个实例对象:

 

协变(Covariance)

根据微软的解释:协变是使您能够使用比最初指定更多的派生类型。这是什么意思?其实就是指,派生类型的值可以安全的赋给基类型(继承自的类型),而反过来就不行。

比如本例中,黄狗的实例,就可以赋值给类型为狗或动物的变量,狗的实例可以赋值给动物类型的变量,但反过来,狗的实例,就不可以赋值给黄狗类型的变量,如下:

 

我觉得这也可以理解,因为这样的赋值是安全的。属性多的实例,赋值给属性少的类型,不会丢失数据。黄狗类包含了动物类所有的成员,所以当黄狗对象赋值给动物类型时,动物类型的每个字段属性都可以被正常赋值,如果反过来,用动物实例对象给黄狗类型赋值,那动物对象中就不存在黄狗对象所需要的字段,视为不安全赋值,所以编译报错。

逆变(contravariance)

也是根据微软的解释:跟协变正好相反,逆变使您能够使用比最初指定的更通用(较少派生)的类型。

这通常发生在函数类型的参数中,看下面的代码:

 

我们定义了三个函数类型,然后为每个函数类型定义了一个函数的实例。

 

接下来,我们定义了一个函数,它的参数是一个FuncDog的函数类型。让我们看看把每个函数传进来会有什么结果,

 

现在反而是 funYellowDog 参数报错了,因为它是继承自Dog,跟协变相反,所以它会报错。那要怎么理解这个呢?为啥会这样,我是这么理解的,

让我们改一下这个函数,让它做点事:

 

因为传入的函数参数终究还是要被调用的,按理它是需要一个狗的对象,所以我们实例化一个dog对象,然后调用 func(dog) ,这时如果使用 FuncAnimal 类型的函数,没有问题,因为它需要的参数是 Animal 类型,所以dog可以赋值给它。正好又符合了协变。

但如果这里允许传入 FuncYellowDog 类型的函数,那当它调用的时候,dog就想当于要赋值给 YellowDog 类型的变量,这就又是不安全的赋值。跟协变里面的错误是一样的。所以就禁止这样做了。

总结

这里有点饶啊,最好大家可以自己上手试试,我觉得可以想明白的。感谢阅读,发现错误请指正。



Tags:Typescript   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
一文读懂 TypeScript 泛型及应用
泛型是静态类型语言的基本特征,允许将类型作为参数传递给另一个类型、函数、或者其他结构。TypeScript 支持泛型作为将类型安全引入组件的一种方式。这些组件接受参数和返回...【详细内容】
2023-11-20  Search: Typescript  点击:(196)  评论:(0)  加入收藏
TypeScript 5.3 来了,一大波新特性
根据 TypeScript 路线图,TypeScript 5.3 计划于 11 月 14 日发布。下面是该版本带来的新特性: 导入属性 导入类型中稳定支持 resolution-mode 所有模块模式均支持 resolution-...【详细内容】
2023-11-16  Search: Typescript  点击:(162)  评论:(0)  加入收藏
万字详解 TypeScript 高级用法
TypeScript 是一种类型安全的 JavaScript 超集,除了基本类型和对象类型之外,TypeScript 还提供了一些高级类型系统,使得我们可以更好地处理复杂的数据结构和业务逻辑。本文将深...【详细内容】
2023-10-31  Search: Typescript  点击:(340)  评论:(0)  加入收藏
TypeScript 不是一种编程语言?
【CSDN 编者按】Type 算是一种编程语言吗?来看看你是否真的了解Type 和 Java 的区别以及它的使用场景。&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;&zwj;...【详细内容】
2023-09-15  Search: Typescript  点击:(220)  评论:(0)  加入收藏
TypeScript 出现 Go 和 Rust的 错误? 没有Try/Catch?
JavaScript 依靠抛出异常来处理错误,而 Go 和 Rust 将它们视为值。 你可能认为这没什么大不了的&hellip;&hellip;但是,孩子,这可能听起来微不足道; 然而,它改变了游戏规则。那么,...【详细内容】
2023-09-07  Search: Typescript  点击:(225)  评论:(0)  加入收藏
TypeScript 5.3 初探,有你想要的功能吗?
【CSDN 编者按】本文所提到的这些功能,你最希望哪个能实现。原文链接:https://www.totaltype.com/type-5-3作者 | Matt Pocock 翻译 | ChatGPT责编 | 梦依丹出品 | CSDN(ID:CSDN...【详细内容】
2023-08-30  Search: Typescript  点击:(319)  评论:(0)  加入收藏
TypeScript 程序员晋级的 11 个必备技巧
当你学习TypeScript时,你的第一印象可能会欺骗你:这不就是JavaScript注解的一种方式吗?不就是编译器用来帮助我找到潜在bug的吗?虽然这种说法没错,但随着你对TypeScript不断了解...【详细内容】
2023-04-21  Search: Typescript  点击:(236)  评论:(0)  加入收藏
深入理解 TypeScript 高级用法
TypeScript 是一种类型安全的 JavaScript 超集,除了基本类型和对象类型之外,TypeScript 还提供了一些高级类型系统,使得我们可以更好地处理复杂的数据结构和业务逻辑。本文将深...【详细内容】
2023-03-28  Search: Typescript  点击:(207)  评论:(0)  加入收藏
字节 React + TypeScript 实践总结篇
❗️ 准备知识 熟悉 React 熟悉 TypeScript (参考书籍:2ality&#39;s guide[1], 初学者建议阅读:chibicode&#39;s tutorial[2]) 熟读 React 官方文档 TS 部分[3] 熟读 TypeScript...【详细内容】
2023-01-29  Search: Typescript  点击:(241)  评论:(0)  加入收藏
JavaScript 和 Typescript 中的 Promise
厌倦了理清 JavaScript 或 TypeScript 项目中的异步代码?您是否希望有一种方法可以使您的异步进程像运转良好的机器一样运行? 如果是这种情况,我们为您提供了一个解决方案:promi...【详细内容】
2023-01-09  Search: Typescript  点击:(296)  评论:(0)  加入收藏
▌简易百科推荐
17 个你需要知道的 JavaScript 优化技巧
你可能一直在使用JavaScript搞开发,但很多时候你可能对它提供的最新功能并不感冒,尽管这些功能在无需编写额外代码的情况下就可以解决你的问题。作为前端开发人员,我们必须了解...【详细内容】
2024-04-03  前端新世界  微信公众号  Tags:JavaScript   点击:(5)  评论:(0)  加入收藏
你不可不知的 15 个 JavaScript 小贴士
在掌握如何编写JavaScript代码之后,那么就进阶到实践&mdash;&mdash;如何真正地解决问题。我们需要更改JS代码使其更简单、更易于阅读,因为这样的程序更易于团队成员之间紧密协...【详细内容】
2024-03-21  前端新世界  微信公众号  Tags:JavaScript   点击:(27)  评论:(0)  加入收藏
又出新JS运行时了!JS运行时大盘点
Node.js是基于Google V8引擎的JavaScript运行时,以非阻塞I/O和事件驱动架构为特色,实现全栈开发。它跨平台且拥有丰富的生态系统,但也面临安全性、TypeScript支持和性能等挑战...【详细内容】
2024-03-21  前端充电宝  微信公众号  Tags:JS   点击:(26)  评论:(0)  加入收藏
构建一个通用灵活的JavaScript插件系统?看完你也会!
在软件开发中,插件系统为应用程序提供了巨大的灵活性和可扩展性。它们允许开发者在不修改核心代码的情况下扩展和定制应用程序的功能。本文将详细介绍如何构建一个灵活的Java...【详细内容】
2024-03-20  前端历险记  微信公众号  Tags:JavaScript   点击:(20)  评论:(0)  加入收藏
对JavaScript代码压缩有什么好处?
对JavaScript代码进行压缩主要带来以下好处: 减小文件大小:通过移除代码中的空白符、换行符、注释,以及缩短变量名等方式,可以显著减小JavaScript文件的大小。这有助于减少网页...【详细内容】
2024-03-13  WangLiwen    Tags:JavaScript   点击:(2)  评论:(0)  加入收藏
跨端轻量JavaScript引擎的实现与探索
一、JavaScript 1.JavaScript语言JavaScript是ECMAScript的实现,由ECMA 39(欧洲计算机制造商协会39号技术委员会)负责制定ECMAScript标准。ECMAScript发展史: 2.JavaScript...【详细内容】
2024-03-12  京东云开发者    Tags:JavaScript   点击:(2)  评论:(0)  加入收藏
面向AI工程的五大JavaScript工具
令许多人惊讶的是,一向在Web开发领域中大放异彩的JavaScript在开发使用大语言模型(LLM)的应用程序方面同样大有价值。我们在本文中将介绍面向AI工程的五大工具,并为希望将LLM...【详细内容】
2024-02-06    51CTO  Tags:JavaScript   点击:(53)  评论:(0)  加入收藏
JS小知识,使用这6个小技巧,避免过多的使用 if 语句
最近在重构我的代码时,我注意到早期的代码使用了太多的 if 语句,达到了我以前从未见过的程度。这就是为什么我认为分享这些可以帮助我们避免使用过多 if 语句的简单技巧很重要...【详细内容】
2024-01-30  前端达人  今日头条  Tags:JS   点击:(57)  评论:(0)  加入收藏
18个JavaScript技巧:编写简洁高效的代码
本文翻译自 18 JavaScript Tips : You Should Know for Clean and Efficient Code,作者:Shefali, 略有删改。在这篇文章中,我将分享18个JavaScript技巧,以及一些你应该知道的示例...【详细内容】
2024-01-30  南城大前端  微信公众号  Tags:JavaScript   点击:(71)  评论:(0)  加入收藏
使用 JavaScript 清理我的 200GB iCloud,有了一个意外发现!
本文作者在综合成本因素之下,决定用 Java 脚本来清理一下自己的 iCloud,结果却有了一个意外发现,即在 iCloud 中上传同一个视频和删除此视频之后,iCloud 的空间并不一致,这到底是...【详细内容】
2024-01-11    CSDN  Tags:JavaScript   点击:(99)  评论:(0)  加入收藏
站内最新
站内热门
站内头条