typescript & 交叉类型

这篇具有很好参考价值的文章主要介绍了typescript & 交叉类型。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

交叉类型简介

TypeScript中的交叉类型是指将多个类型合并为一个类型。这使得我们可以将现有的多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性。

写这篇文章先问大家一个问题,如何让一个对象既有a类型约束,又有b类型约束?
如果你看了我这篇文章typescrip接口 interface详解,以及ts实现多态,
那么你就会很轻易的回答我定义接口使用继承,
typescript & 交叉类型,typescript,typescript,javascript,前端,ts交叉类型,ts交叉类型详解,交叉类型与接口的区别,交叉类型与interface

但使用接口有一个问题,就是当两个接口里面有同名但是不同类型约束时,就会报错,如下
typescript & 交叉类型,typescript,typescript,javascript,前端,ts交叉类型,ts交叉类型详解,交叉类型与接口的区别,交叉类型与interface
这个时候就得用上交叉类型了
交叉类型(&): 功能类似于接口继承,(extends),用于组合多个类型为一个类型(常用于对象类型).
如下
typescript & 交叉类型,typescript,typescript,javascript,前端,ts交叉类型,ts交叉类型详解,交叉类型与接口的区别,交叉类型与interface
tips:当使用交叉类型后,新的类型C就同时具备了A和B的所有属性或方法约束,相当于

type C1 = { a: string, b: number }

我们很简单就能证明这个例子
如下图,根据鸭子类型理论,C就是C1
typescript & 交叉类型,typescript,typescript,javascript,前端,ts交叉类型,ts交叉类型详解,交叉类型与接口的区别,交叉类型与interface

交叉类型与接口继承的区别

交叉类型(&)和接口继承(extends)的对比

  • 相同点:都可以实现对象类型的组合
  • 不同点:两种方式实现类型组合时,对于同名属性之间,处理类型冲突的方式不同

接口处理同名属性类型冲突: 不允许
typescript & 交叉类型,typescript,typescript,javascript,前端,ts交叉类型,ts交叉类型详解,交叉类型与接口的区别,交叉类型与interface

交叉类型处同名属性类型冲突
typescript & 交叉类型,typescript,typescript,javascript,前端,ts交叉类型,ts交叉类型详解,交叉类型与接口的区别,交叉类型与interface
当我们鼠标移上去可以看到
typescript & 交叉类型,typescript,typescript,javascript,前端,ts交叉类型,ts交叉类型详解,交叉类型与接口的区别,交叉类型与interface文章来源地址https://www.toymoban.com/news/detail-732117.html

到了这里,关于typescript & 交叉类型的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端TypeScript学习day01-TS介绍与TS部分常用类型

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 TypeScript 介绍 TypeScript 是什么 TypeScript 为什么要为 JS 添加类型支持?  TypeScript 相比 JS 的优势  TypeScript 初体验  安装编译 TS 的工具包 编译并运行 TS 代码 简化运行 TS

    2024年02月08日
    浏览(39)
  • TypeScript高级类型:联合类型、交叉类型和类型别名

    TypeScript 是一门强类型语言,其高级类型功能使得开发者能够更加灵活地定义类型并对其进行操作,以便于更好地编写可维护和可扩展的代码。 在本文中,将着重讨论三种高级类型:联合类型、交叉类型和类型别名。我们将详细介绍这些类型,并且还会提供一些有用的代码示

    2024年02月10日
    浏览(44)
  • typescript & 交叉类型

    TypeScript中的交叉类型是指将多个类型合并为一个类型。这使得我们可以将现有的多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性。 写这篇文章先问大家一个问题,如何让一个对象既有a类型约束,又有b类型约束? 如果你看了我这篇文章typescrip接口 interface详解

    2024年02月07日
    浏览(37)
  • TypeScript 学习笔记(一):基本类型、交叉类型、联合类型、类型断言

    TS中实现对象属性必选、对象属性在开发过程中十分常见,前端在传参数时,有些参数比必传,有些是选传,我们可以定一个多个对象来实现传参,但是这让代码变得冗余。我们可以通过TS定义数据类型来实现。 TypeScript中文网 1. 数组 2. 布尔 3. 数值 当我们给num赋值为123但没有

    2024年02月15日
    浏览(45)
  • TypeScript中的对象类型(可选属性 只读属性 交叉类型)

    一、定义对象类型 在TypeScript中定义对象类型有以下三种方式: 1. 匿名对象类型 匿名对象类型是在定义变量时直接使用花括号{},来定义一个对象类型。例如: 上述代码中定义了一个person变量,它的类型为对象,它有两个属性:name和age,其中name属性的类型为字符串,age属性

    2024年02月11日
    浏览(49)
  • 【TypeScript】TS类型声明(二)

    🐱个人主页: 不叫猫先生 🙋‍♂️作者简介:前端领域新星创作者、华为云享专家、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫系列专栏:vue3从入门到精通、TypeScript从入门到实践 📝个人签名:不破不立 TypeScript从入门到实践专栏 是博

    2024年01月20日
    浏览(43)
  • 【TypeScript】TS类型守卫(六)

    🐱个人主页: 不叫猫先生 🙋‍♂️作者简介:前端领域优质创作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫系列专栏:vue3从入门到精通、TypeScript从入门到实践 📝个人签名:不破不立 📢资料领取:前端进阶资料以及文中源码可以

    2024年02月22日
    浏览(45)
  • 【TypeScript】TS条件类型(十)

    🐱 个人主页: 不叫猫先生 🙋‍♂️ 作者简介:2022年度博客之星前端领域TOP 2,前端领域优质作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫优质专栏:vue3从入门到精通、TypeScript从入门到实践 📢 资料领取:前端进阶资料以及文中源

    2023年04月11日
    浏览(46)
  • 【TypeScript】TS类型断言-类型的声明和转换(五)

    🐱个人主页: 不叫猫先生 🙋‍♂️作者简介:前端领域新星创作者、华为云享专家、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫系列专栏:vue3从入门到精通、TypeScript从入门到实践 📝个人签名:不破不立 📢资料领取:前端进阶资料以

    2024年02月22日
    浏览(39)
  • TypeScript基础篇 - TS日常类型 上篇

    目录 TS的常见用法介绍  example01.ts 逃避类型检查:any 思考一下~:不知道类型 类型标注 函数(参数和返回值) 匿名函数 TS如何知道匿名函数的类型? TS是一种标注式语言,不侵入JS的设计 文章内容 基础类型、数组 any/unkown 类型标注 函数 对象类型 联合 别名 接口 断言 字面

    2024年02月16日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包