TypeScript 联合类型与交叉类型详解

TypeScript 联合类型与交叉类型详解

1. 联合类型 (Union Types)

联合类型表示一个值可以是几种类型之一,使用 | 分隔类型。

基本语法 :

ini 复制代码
type ID = number | string;

特点 :

  • 只能访问所有类型共有的成员
  • 常用于函数参数接受多种类型
  • 需要类型守卫(type guards)来区分具体类型 示例 :
typescript 复制代码
function printId(id: number | string) {
  if (typeof id === 'string') {
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed(2));
  }
}

2. 交叉类型 (Intersection Types)

交叉类型将多个类型合并为一个类型,使用 & 连接类型。

基本语法 :

ini 复制代码
type Admin = Person & Permission;

特点 :

  • 包含所有类型的属性
  • 常用于混入(mixins)或扩展接口
  • 新类型具有所有类型的特性 示例 :
ini 复制代码
interface Person {
  name: string;
}

interface Permission {
  level: number;
}

type Admin = Person & Permission;

const admin: Admin = {
  name: 'Alice',
  level: 10
};

3. 联合类型与交叉类型的区别

| 特性 | 联合类型 ( | ) | 交叉类型 ( & ) | |------------|--------------|--------------| | 语义 | 或 | 与 | | 结果类型成员 | 共有成员 | 所有成员合并 | | 典型用途 | 多种可能输入 | 组合/扩展类型 |

4. 高级用法

联合类型与类型守卫 :

typescript 复制代码
function padLeft(value: string, padding: string | number) {
  if (typeof padding === 'number') {
    return Array(padding + 1).join(' ') + value;
  }
  return padding + value;
}

交叉类型与接口扩展 :

css 复制代码
interface A { a: number }
interface B { b: string }

type C = A & B;

const c: C = { a: 1, b: 'test' };

5. 实际应用场景

  • 联合类型 : API响应可能返回成功或错误对象
  • 交叉类型 : 组合多个React高阶组件属性
  • 组合使用 : 创建灵活的类型系统
ini 复制代码
type Result = Success | Error;
type ComponentProps = BaseProps & ThemeProps & StyleProps;
相关推荐
zhuiQiuMX几秒前
字节面试手撕中等题但还没做出来
面试
趣多多代言人2 小时前
从零开始手写嵌入式实时操作系统
开发语言·arm开发·单片机·嵌入式硬件·面试·职场和发展·嵌入式
掘金安东尼5 小时前
革新Web部署:Amazon Amplify Hosting!
后端·面试·github
掘金安东尼5 小时前
把复杂留给架构,把简单留给开发 —— Amazon Aurora DSQL 宣布:全面可用
面试·架构·github
漫天星梦5 小时前
前端列表页大数据内存优化的思考
前端·面试
爱学习的茄子5 小时前
从0到1:揭秘前端网络请求的进化之路
前端·javascript·面试
欢乐时光c5 小时前
常见请求头响应头的含义
前端·面试
转转技术团队6 小时前
多代理混战?用 PAC(Proxy Auto-Config) 优雅切换代理场景
前端·后端·面试
掘金安东尼6 小时前
蔚来 600 亿研发成本,信还是不信。。
面试·程序员·github
豆苗学前端7 小时前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试