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;
相关推荐
前端小巷子44 分钟前
Vue 虚拟 DOM
前端·vue.js·面试
GSDjisidi6 小时前
日本IT就职面试|仪容&礼仪篇分享建议
面试·职场和发展
岁忧13 小时前
(LeetCode 面试经典 150 题 ) 155. 最小栈 (栈)
java·c++·算法·leetcode·面试·go
星眠15 小时前
学习低代码编辑器第四天
javascript·面试
NeverSettle11057415 小时前
手把手教你用nodejs + vue3 实现大文件上传、秒传、断点续传
前端·面试
Bohemian16 小时前
实现一个单机版令牌桶限流器(字节)
后端·面试
xzkyd outpaper16 小时前
Android中主线程、ActivityThread、ApplicationThread的区别
android·面试
前端拿破轮16 小时前
字节面试官:你对Promise很熟是吧?试一下手写所有静态方法
前端·面试·promise
天天摸鱼的java工程师17 小时前
🧠 MySQL 索引结构有哪些?优缺点是什么?【原理 + 场景实战】
java·后端·面试
ZzMemory19 小时前
深入了解 module.css:前端样式管理的有效方案
前端·css·面试