TypeScript 类型系统进阶：5道高频面试题剖析与实战
最近在面试中遇到一个让我印象深刻的 TypeScript 类型题目：手写 DeepReadonly<T>。当时愣了几秒，脑子里全是 as any。事后认真研究了 type-challenges 的经典题目，发现类型系统的高级用法其实有清晰的套路可循。
本文整理了 5 道面试中出现频率较高的类型题目，每道都包含解题思路和可运行的示例代码，希望对准备面试或需要提升项目类型安全性的读者有所帮助。
核心概念
类型系统高级编程主要依赖四个基本能力：
- 条件类型
T extends U ? X : Y—— 类型层面的条件判断 - infer 关键字 —— 在条件类型中做模式匹配并提取类型
- 映射类型
{ [K in keyof T]: ... }—— 遍历对象的属性键 - 递归类型 —— 处理嵌套数据结构
掌握这四个概念可以解决大多数类型题目，剩下的需要考虑模板字面量类型等特殊技巧。
第一题：MyPick<T, K>
这道题是实现内置的 Pick 类型，属于基础入门题。
核心思路是使用映射类型遍历 K 中的每个键，然后从 T 中提取对应的值类型。
type MyPick<T, K extends keyof T> = {
[P in K]: T[P]
}
// 验证
interface Todo {
title: string
description: string
completed: boolean
}
type TodoPreview = MyPick<Todo, 'title' | 'completed'>
// 结果: { title: string; completed: boolean }
const todo: TodoPreview = {
title: '刷类型体操',
completed: false,
}
关键点是 K extends keyof T 约束了 K 必须是 T 键的子集，面试时这个约束是必加项。
第二题：MyReturnType
实现内置的 ReturnType 类型，用于提取函数的返回值类型。这道题是学习 infer 的典型示例。
通过条件类型判断 T 是否为函数类型，如果是则用 infer R 提取返回值。
type MyReturnType<T extends (...args: any[]) => any> =
T extends (...args: any[]) => infer R ? R : never
// 验证
const fn = (a: number, b: string) => ({ a, b, c: true })
type Result = MyReturnType<typeof fn>
// 结果: { a: number; b: string; c: boolean }
type StrResult = MyReturnType<() => string>
// 结果: string
infer 类似于正则表达式中的捕获组，表示"这里有一个未知类型，帮我推断出来后命名为 R"。理解了这个机制，后续题目就容易了。
第三题：DeepReadonly
这道题要求将对象所有层级的属性都变为 readonly。使用映射类型结合递归处理即可。
type DeepReadonly<T> = {
readonly [K in keyof T]: T[K] extends object
? T[K] extends Function
? T[K] // 函数类型不递归，直接返回
: DeepReadonly<T[K]> // 对象类型递归处理
: T[K] // 基本类型直接返回
}
// 验证
interface NestedConfig {
db: {
host: string
port: number
options: {
ssl: boolean
timeout: number
}
}
debug: boolean
callback: () => void
}
type ReadonlyConfig = DeepReadonly<NestedConfig>
const config: ReadonlyConfig = {
db: { host: 'localhost', port: 5432, options: { ssl: true, timeout: 3000 } },
debug: false,
callback: () => console.log('ok'),
}
// config.debug = true // ❌ Error: Cannot assign to 'debug'
// config.db.options.ssl = false // ❌ Error: Cannot assign to 'ssl'
需要注意：TypeScript 中的 object 类型包含 Function 和 Array 等引用类型，所以要单独排除 Function，否则函数属性会被错误地递归展开。
第四题：TupleToUnion
将元组类型转换为联合类型，例如 [string, number, boolean] 变成 string | number | boolean。
有一种简洁的写法，直接使用索引访问 T[number]。
// 方式一：索引访问（推荐，代码简洁）
type TupleToUnion<T extends readonly any[]> = T[number]
// 方式二：递归实现（面试可能会要求写这种）
type TupleToUnionRecursive<T extends readonly any[]> =
T extends [infer First, ...infer Rest]
? First | TupleToUnionRecursive<Rest>
: never
// 验证
type Tuple = [string, number, boolean]
type Union1 = TupleToUnion<Tuple> // string | number | boolean
type Union2 = TupleToUnionRecursive<Tuple> // string | number | boolean
// 实际应用：限定函数参数为特定字面量
const allowedMethods = ['GET', 'POST', 'PUT', 'DELETE'] as const
type HttpMethod = TupleToUnion<typeof allowedMethods>
// 结果: "GET" | "POST" | "PUT" | "DELETE"
function request(method: HttpMethod, url: string) {
console.log(method, url)
}
request('GET', '/api/users') // ✅
// request('PATCH', '/api/users') // ❌ 类型报错
T[number] 的原理：元组使用 number 作为索引时，TypeScript 会将所有位置的类型合并成联合类型。这种模式在实际项目中配合 as const 可作为枚举的替代方案。
第五题：Chainable
实现链式调用的类型支持，是 type-challenges 中的中等难度题目。
type Chainable<T = {}> = {
option<K extends string, V>(
key: K extends keyof T ? never : K, // key 不能重复
value: V
): Chainable<Omit<T, K> & Record<K, V>> // 合并到结果类型
get(): T
}
// 验证
declare const config: Chainable
const result = config
.option('name', 'typescript')
.option('age', 26)
.option('isAdmin', true)
.get()
// result 类型自动推断为：
// { name: string; age: number; isAdmin: boolean }
// 以下会报错，因为 key 重复：
// config.option('name', 'ts').option('name', 123) // ❌
这道题的核心技巧有两个：
K extends keyof T ? never : K防止重复 key。当K已存在于T中时，类型变为never，任何字符串都不满足never，从而触发错误。- 返回
Chainable<Omit<T, K> & Record<K, V>>，每次调用.option()都返回新的Chainable实例，类型参数逐步累积。
这种模式在 Builder Pattern 中很常见，如 ORM 查询构建器、配置对象构建器等。
常见陷阱
陷阱 1：联合类型的分发行为
// 条件类型会对联合类型自动分发
type ToArray<T> = T extends any ? T[] : never
type Result = ToArray<string | number>
// 预期: (string | number)[]
// 实际: string[] | number[]
// 阻止分发：用元组包装
type ToArrayNoDistribute<T> = [T] extends [any] ? T[] : never
type Result2 = ToArrayNoDistribute<string | number>
// 结果: (string | number)[]
如果不了解这个行为，很多题目的结果都会对不上。
陷阱 2：递归深度限制
TypeScript 类型递归默认有深度限制（大约 50 层，版本间有差异）。处理深层嵌套时可能遇到 Type instantiation is excessively deep and possibly infinite 错误。遇到这种情况通常需要重新设计类型方案。
陷阱 3：空对象 {} 的含义
// {} 并非表示"空对象"
// 它表示"任何非 null 非 undefined 的值"
type Test1 = string extends {} ? true : false // true
type Test2 = number extends {} ? true : false // true
type Test3 = null extends {} ? true : false // false
// 要表示真正的空对象，使用 Record<string, never>
在编写类型工具时，这个细节经常导致非预期行为。
总结
类型系统高级编程本质上就是在类型层面编写逻辑代码。将 extends 视为条件判断，infer 视为变量解构，映射类型视为循环遍历，递归就是递归——与普通函数的思维方式没有本质区别。
保持每周练习 2-3 道 type-challenges 题目有助于维持手感。面试中能够流畅手写高级类型，比口头描述"TypeScript 支持类型推导和类型保护"更有说服力。
目前 AI 辅助工具如 Claude Code 和 Cursor 能够帮助生成复杂的类型工具函数初版，但理解底层原理仍然重要——AI 生成的类型有时过度复杂或存在边界情况漏洞，不理解原理就难以进行有效的 review。
