typescript中 & 和 | 的用法和区别

在 TypeScript 中,&| 分别用于创建交叉类型(Intersection Types)和联合类型(Union Types),它们是 TypeScript 类型系统中的核心概念。

交叉类型(&

交叉类型是将多个类型合并为一个类型,这意味着新类型将具有所有成员类型的特性。这在你想要组合多个类型的属性到一个类型中时非常有用。

typescript 复制代码
type A = { a: string };
type B = { b: number };
type C = A & B;

let example: C = { a: "hello", b: 42 }; // 正确

在上面的例子中,类型 C 是类型 AB 的交叉,因此 C 类型的对象 example 必须包含 a 属性(来自 A)和 b 属性(来自 B)。

联合类型(|

联合类型表示一个值可以是几种类型之一。它用于表示一个值可以属于多个类型中的任何一个。

typescript 复制代码
type D = string | number;

let value: D;
value = "test"; // 正确
value = 123;    // 正确
value = true;   // 错误,`boolean` 不是 `string | number`

在上面的例子中,类型 Dstringnumber 的联合,意味着变量 value 可以赋值为字符串或数字。

区别

  • 交叉类型 (&) 合并多个类型的属性,创建出一个包含所有属性的单一类型。如果不同类型中存在同名属性但类型不兼容,交叉类型将无法正确形成(结果为 never 类型),因为没有任何类型可以同时是这些不兼容的类型。
  • 联合类型 (|) 表示一个值可以是多种类型中的任何一种。在使用联合类型的值时,你只能访问所有成员类型共有的属性或方法。

在实际应用中,你可能会需要在对象类型、函数参数、返回值等多种地方使用这两种类型。选择使用哪一种取决于你的具体需求:是否需要组合类型(&)还是需要一个值可以是多种类型之一(|)。

相关推荐
心在飞扬13 分钟前
ReRank重排序提升RAG系统效果
前端·后端
心在飞扬18 分钟前
RAPTOR 递归文档树优化策略
前端·后端
前端Hardy35 分钟前
别再无脑用 `JSON.parse()` 了!这个安全漏洞你可能每天都在触发
前端·javascript·vue.js
前端Hardy37 分钟前
别再让 `console.log` 上线了!它正在悄悄拖垮你的生产系统
前端·javascript·vue.js
青青家的小灰灰41 分钟前
从入门到精通:Vue3 ref vs reactive 最佳实践与底层原理
前端·vue.js·面试
OpenTiny社区1 小时前
我的新同事是个AI:支持skill后,它用TinyVue搭项目还挺溜!
前端·vue.js·ai编程
心在飞扬1 小时前
MultiVector 多向量检索
前端·后端
用户39051332192881 小时前
async 函数返回的 Promise 状态何时变为 resolved
前端
李剑一1 小时前
大屏天气展示太普通?视觉升级!用 Canvas 做动态天气遮罩,雷阵雨效果直接封神
前端·vue.js·canvas
Lee川2 小时前
现代Web开发中的CSS继承、Flexbox布局与LocalStorage交互:从文档解析到实践应用
前端·css