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

金疙瘩2025-06-18 15:52

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;