✍️【TS类型体操进阶】挑战类型极限，成为类型魔法师！♂️✨

news2025/5/11 15:21:24

哈喽类型战士们！今天我们要玩转TS类型体操，让你的类型系统像体操运动员一样灵活优雅~ 学会这些绝招，保准你的代码类型稳如老狗！（文末附类型体操段位表）🚀

一、什么是类型体操？

🧩 通俗理解：用类型写"代码"

就像用积木搭建复杂建筑，用基础类型组合出神奇的类型结构！

⚙️ 核心装备：

✅ 条件类型（类型界的if/else）
✅ 映射类型（类型复印机）
✅ 模板字面量（字符串类型魔法）
✅ 递归类型（类型永动机）

二、六大高阶技巧揭秘

1️⃣ 字符串模板类型 —— 类型界的PS

type HttpMethod = 'GET' | 'POST'  
type ApiPath = `/api/${string}`  

const path: ApiPath = '/api/user'  // ✅  
const errorPath: ApiPath = '/user' // ❌

实战场景：

路由路径校验
CSS类名规范

2️⃣ 递归类型 —— 类型"套娃"

// 实现树形结构类型  
type TreeNode<T> = {  
  value: T  
  children?: TreeNode<T>[]  
}  

const tree: TreeNode<string> = {  
  value: 'root',  
  children: [{ value: 'leaf' }]  
}

应用场景：

无限级菜单
组织架构树

3️⃣ 类型推断(infer)进阶 —— 类型侦探

// 提取函数返回值类型  
type GetReturnType<T> = T extends (...args: any) => infer R ? R : never  

type A = GetReturnType<() => string>  // string  
type B = GetReturnType<number>        // never

破案技巧：

提取数组元素类型
解构Promise返回值

4️⃣ 分布式条件类型 —— 类型分身术

type ToArray<T> = T extends any ? T[] : never  

type StrArr = ToArray<string | number>  // string[] | number[]

原理揭秘：
当T是联合类型时，条件类型会分布式执行

5️⃣ 类型映射2.0 —— 深度改造

// 递归将所有属性变为只读  
type DeepReadonly<T> = {  
  readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P]  
}  

type User = {  
  name: string  
  info: { age: number }  
}  

type ReadonlyUser = DeepReadonly<User>  
/*  
{  
  readonly name: string  
  readonly info: {  
    readonly age: number  
  }  
}  
*/

6️⃣ 类型编程实战 —— 实现内置工具

// 手写Partial  
type MyPartial<T> = {  
  [P in keyof T]?: T[P]  
}  

// 手写Exclude  
type MyExclude<T, U> = T extends U ? never : T

进阶挑战：

实现Omit
实现NonNullable

三、Vue3中的类型体操实战

1️⃣ 组件Props类型推导

// 自动提取Props类型  
const props = defineProps<{  
  id: number  
  name: string  
}>()  

type PropsType = typeof props  // { id: number; name: string }

2️⃣ 组合式函数类型增强

// 带自动类型推断的useState  
function useState<T>(initial: T) {  
  const state = ref(initial)  
  const setState = (value: T) => state.value = value  
  return [state, setState] as const  
}  

const [count, setCount] = useState(0)  // 自动推断number类型

四、类型体操段位表

段位	掌握技能	示例场景
青铜	基础泛型、接口	函数参数类型约束
白银	条件类型、映射类型	表单校验类型
黄金	模板字面量、类型推断	API路径校验
钻石	递归类型、分布式条件	树形结构类型
王者	类型编程、模拟内置工具	实现复杂工具类型