TypeScript infer 实战：从数组类型中精准提取元素的四种高阶技巧

在TypeScript的类型系统中， infer 关键字就像一把精巧的手术刀，能让我们在类型层面进行精确的"解剖"操作。对于已经掌握TS基础的开发者来说，熟练运用 infer 意味着能将类型安全提升到全新维度——特别是在处理复杂数据结构时。本文将带你从实战角度，通过四个典型场景，掌握如何用 infer 从数组类型中提取所需元素。

1. 理解infer的核心机制

infer 的本质是类型模式匹配中的变量声明。当我们在条件类型中使用 extends 进行匹配时， infer 可以捕获匹配到的部分作为临时类型变量。这个特性在处理嵌套类型时尤其强大，就像在运行时用解构赋值提取值一样，只不过这是在编译时对类型进行操作。

考虑这个简单例子：

type UnpackPromise<T> = T extends Promise<infer U> ? U : never

这里 infer U 会捕获 Promise 包裹的实际类型。如果传入 Promise<number> ， U 就是 number 。这种模式是 infer 最基础的用法，但当我们把它应用到数组上时，就能实现更精细的类型操作。

2. 提取数组首元素类型

处理API响应时，经常需要获取数组第一个元素的类型。假设我们有一个用户列表API返回 User[] ，但某个页面只需要展示第一个用户的信息。这时就需要安全地提取首元素类型：

type Head<T extends any[]> = T extends [infer First, ...any[]] ? First : never

// 实战应用
interface User { name: string; age: number }
type UserList = [User, ...User[]]

type FirstUser = Head<UserList>  // FirstUser ≡ User

关键点解析：

• T extends [infer First, ...any[]] 匹配至少有一个元素的数组
• ...any[] 表示我们不关心剩余元素的类型
• 如果匹配失败（空数组），返回 never 保证类型安全

在Redux中，这种技巧可以用来定义action payload的类型约束：

type ActionPayload<T extends any[]> = Head<T>

3. 获取数组末尾元素类型

与提取首元素相对应，获取末尾元素在处理栈结构或最近记录时很有用。比如从操作历史记录中获取最后一步的类型：

type Tail<T extends any[]> = T extends [...any[], infer Last] ? Last : never

// 应用示例
type OperationLogs = ['create', 'update', 'delete']
type LastOperation = Tail<OperationLogs>  // "delete"

实现要点：

• ...any[] 放在前面捕获除最后一个外的所有元素
• 这种模式与JavaScript的rest参数位置正好相反
• 同样用 never 处理空数组情况

在表单多步骤流程中，可以用它来确保当前步骤类型的准确性：

type FormSteps = ['info', 'payment', 'confirm']
type CurrentStep = Tail<FormSteps>  // "confirm"

4. 移除数组首元素（Shift操作）

在类型系统中模拟数组的shift操作，可以用于处理参数列表的剩余部分。比如实现一个柯里化函数的类型定义：

type Shift<T extends any[]> = T extends [any, ...infer Rest] ? Rest : []

// 柯里化函数类型应用
type CurryParams<Params extends any[], Return> = 
  Params extends []
    ? Return
    : (arg: Head<Params>) => CurryParams<Shift<Params>, Return>

// 生成 (a: number) => (b: string) => boolean
type CurriedFn = CurryParams<[number, string], boolean>

技术细节：

• [any, ...infer Rest] 确保至少有一个元素
• 返回 Rest 即剩余部分
• 空数组返回空数组保持类型安全

5. 移除数组末尾元素（Pop操作）

与shift相对，pop操作在处理类似路径解析的场景很有用。比如从文件路径中移除最后一级：

type Pop<T extends any[]> = T extends [...infer Rest, any] ? Rest : []

// 路径处理示例
type PathParts = ['usr', 'local', 'bin']
type ParentPath = Pop<PathParts>  // ["usr", "local"]

进阶应用： 结合模板字面量类型，可以构建类型安全的路径操作：

type JoinPath<T extends string[]> = 
  T extends [] ? '' : `/${Head<T>}${JoinPath<Shift<T>>}`

type FullPath = JoinPath<['user', 'profile', 'edit']> 
// "/user/profile/edit"

6. 构建你的类型工具库

将上述工具类型组织起来，就形成了一个基础但强大的类型工具库：

type ArrayUtils = {
  Head: <T extends any[]>(arr: T) => Head<T>
  Tail: <T extends any[]>(arr: T) => Tail<T>
  Shift: <T extends any[]>(arr: T) => Shift<T>
  Pop: <T extends any[]>(arr: T) => Pop<T>
}

// 实际使用时可配合类型断言
declare const arrayUtils: ArrayUtils
const first = arrayUtils.Head([1, '2', true])  // number

扩展建议：

• 添加 Slice 、 Concat 等更复杂的操作
• 实现递归类型处理嵌套数组
• 结合 keyof 和 infer 处理对象数组

在大型项目中，这样的类型工具能显著提升代码的可维护性。比如在API层定义响应类型时：

type ApiResponse<T> = {
  data: T
  meta: { page: number }
}

type ExtractData<T> = T extends ApiResponse<infer D> ? D : never

// 自动提取出User[]
type UserData = ExtractData<ApiResponse<User[]>>  

掌握这些技巧后，你会发现TypeScript的类型系统远比表面看起来强大。 infer 就像类型编程中的显微镜，让你能看到并操作类型系统的深层结构。