TypeScript：交叉类型（&）和接口继承（extends）的区别

最新推荐文章于 2024-08-27 16:58:03 发布
最新推荐文章于 2024-08-27 16:58:03 发布
阅读量352 收藏
点赞数 2
文章标签： typescript 前端、
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45427648/article/details/136399958
版权
本文介绍了JavaScript中交叉类型的功能，它类似接口继承，允许组合多个类型创建新类型（如PersonDetail同时具有Person和Contact属性）。与接口继承相比，交叉类型在处理同名属性冲突时更为灵活，且不会报类型不兼容错误。
摘要由CSDN通过智能技术生成

介绍

交叉类型（&）：功能类似于接口继承（extends），用于组合多个类型为一个类型（常用于对象类型）。
比如
在这里插入图片描述
解释：使用交叉类型后，新的类型 PersonDetail 就同时具备了 Person 和 Contact 的所有属性类型。
相当于，
在这里插入图片描述

区别

交叉类型（&）和接口继承（extends）的对比：

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

在这里插入图片描述
说明：以上代码，接口继承会报错（类型不兼容）；交叉类型没有错误，可以简单的理解为：

在这里插入图片描述

程序员无羡
关注
Ts总结9、TS的interface 接口(extends关键字继承、type命令的&运算符)
qq_33911541的博客
02-28 1794
Ts总结9、TS的interface 接口(extends关键字继承、type命令的&运算符)
typeScript第一篇 基础类型、任意类型、接口和对象类型、数组类型、函数扩展、（类型断言 | 联合类型 | 交叉类型）
m0_55170432的博客
10-26 925
ts第一章学习
TypeScript交叉类型和接口继承之间的对比
听海边涛声
08-10 216
TypeScript交叉类型和接口继承之间的对比
TS 体操 &(交叉运算) 和 接口的继承的区别
Jioho的博客
07-03 1572
深入了解 TS中 & 和 extend 的异同。根据这个特性出发重新思考定义类型时到底是用type 还是用 interface
typescript中 & 和 | 的用法和区别
qq_42391246的博客
01-30 779
在 TypeScript 中，和分别用于创建交叉类型（Intersection Types）和联合类型（Union Types），它们是 TypeScript 类型系统中的核心概念。
对TS里接口、extends和类的理解
qq_30351747的博客
06-20 1491
对TS里接口、extends和类的理解
TypeScript初体验（三）
liuzaixi的博客
07-03 740
DefinitelyTyped是一个GitHub仓库，用来提高质量TypeScript类型声明，可以通过npm/yarn来下载TS类型声明包，这些包的名称格式为：@type/*，例如：@type/react等。4、Record：构造一个对象类型，属性键为Keys表示对象有哪些属性，属性类型为Type表示对象属性的类型，1、Partial：将Type的所有属性设置为可选，不会改变传入类型的本身，而是创建一个新的类型。表示只要是string类型的属性名称，都可以出现在对象中。
how-can-i-typescript:最先进和最复杂的Typescript功能示例
04-10
9. **高级类型**：TypeScript还包括了联合类型、交叉类型、never类型、可选参数和剩余参数等。这些都是构建复杂类型系统的工具。 10. **类型守卫（Type Guards）**：类型守卫是用于在运行时确定变量的类型的技术。...
React & Typescript：组件的入门实例
iamxuqianqian的博客
04-30 328
React 组件的演化 组件复用方式 优势 劣势 状态 类组件（Class） 发展时间长，接受度广泛 只能继承父类 作为一种传统开发模式，会长期存在 Mixin 可以复制任意对象的任意多个方法，实现组件间的复用 组件间相互依赖、耦合，可能产生冲突，不利于维护 被官方抛弃 高阶组件（HOC） 利用装饰器模式，在不改变组件的基础上，动态地为其添加新的能力 嵌套过多调试困难，需要遵循某些约定（不改变原始组件，透传 props 等） 能力强大，广泛引用 Hooks 替代类组件，多个 Ho
TypeScript中的高级类型：联合类型与交叉类型
在TypeScript中，类型扮演着非常重要的角色，它有助于在编码过程中捕获潜在的错误，并提供了更好的代码提示和文档，从而提高了代码的可维护性和可读性。 TypeScript的类型系统是建立在JavaScript之上的，它允许我们...
Typescript中的extends关键字
热门推荐
qq_34998786的博客
09-15 1万+
前言 extends关键字在TS编程中出现的频率挺高的，而且不同场景下代表的含义不一样，特此总结一下：表示继承/拓展的含义表示约束的含义表示分配的含义基本使用 extends是 ts 里一...
TS 类型体操 之 extends,Equal,Alike 使用场景和实现对比
Jioho的博客
07-05 2993
深入对比了TS中常用的几种判断方法，extends，Equal，Alike。深入了解 Equal 背后实现的原理。更好的理解这几种判断常用的应用场景
typescript学习之路(四) —— ts类的继承（包含es5以及es6的类继承）
北极那企鹅丶
11-21 4528
上一文已经写了es5，es6等类的定义，所以本章主要写es5和es6的继承，由于es6的继承和ts的继承如出一辙，只是加了类型定义而已，所以ts的继承稍微写下，不会太详细。 文章目录es5继承原型链继承构造函数继承组合继承es6继承ts继承 es5继承 原型链继承 所谓原型链继承，就是将一个实例对象挂载到另一个原型上。即继承对象的prototype = new 实例化的对象 // 声明一个Pa...
TS中类与类的继承、修饰符
jujuman的博客
07-10 3176
1、ts定义类 class class Person { public name: string //属性 public关键词可省略 constructor(name: string) { //构造函数 实例化触发的方法 this.name = name; } getName(): string { return this.name; } setName(name...
关于typescript中的extends和infer以及用法
qq_35094120的博客
11-20 1007
首先判断是不是null或者undefined，如果是则返回undefined，否则返回data.name。可以看到是表示不为null和undefined才会获取data.name否则是’dog’。object 不能接收原始类型，而 {} 和 Object 都可以，这是它们的区别。{} 是个空对象，没有索引，如果将某些内容注释为{}，则可以是任何一种类型。此时合并的是never，所以非对象类型合并的必须是同类型。双向协变：父类型可以赋给子类型，子类型也可以赋给父类型。协变：子类型赋给父类型。
TypeScript类、接口、继承
浓浓的巧克力
06-20 3231
TS引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。 基本上，TS的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。 类 定义一个类 class Point { constructor(x, y) { th...
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
CallMe_CrabXie的博客
08-27 2114
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
计算机图形学之动画和模拟算法：Inverse Kinematics：游戏开发中的逆向运动学实现.docx
最新发布
11-06
计算机图形学之动画和模拟算法：Inverse Kinematics：游戏开发中的逆向运动学实现.docx
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员无羡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值