TypeScript详解十二：条件类型、内置条件类型

'# TypeScript详解十二：条件类型、内置条件类型

一、背景与问题

在TypeScript中，类型系统是其核心特性之一。随着项目复杂度的提升，我们经常需要根据类型参数动态生成不同类型。例如：

• 根据T extends string决定类型是否为字符串
• 根据T是否为可选属性生成不同接口
• 根据接口的字段类型进行动态过滤

传统做法需要手动定义多个类型别名，这会导致类型冗余和维护困难。条件类型（Conditional Types）和内置条件类型（Built-in Conditional Types）正是为解决这类问题而设计的高级类型系统功能。

二、基本原理

1. 条件类型语法

TypeScript的条件类型使用extends关键字实现类型判断，基本语法如下：

type ConditionalType<T> = T extends U ? X : Y

其中：

• T是类型参数
• U是判断条件
• X是条件成立时的类型
• Y是条件不成立时的类型

2. infer关键字

infer关键字用于在条件类型中推断类型参数，它可以在extends语句中捕获类型信息：

type GetReturnType<T> = T extends (...args: any[]) => infer R ? R : never

该类型会提取函数的返回类型，例如：

type MyFunc = (a: string) => number
type ReturnType = GetReturnType<MyFunc> // number

3. 内置条件类型

TypeScript提供了多个内置条件类型，它们基于条件类型实现，常见的有：

• Extract<T, U>：从T中提取属于U的类型
• Exclude<T, U>：从T中排除属于U的类型
• NonNullable<T>：排除null和undefined
• ReturnType<T>：提取函数返回类型
• Parameters<T>：提取函数参数类型
• InstanceType<T>：提取构造函数的实例类型

三、环境准备

确保使用TypeScript 4.1及以上版本（支持infer关键字），创建如下文件结构：

typescript-conditional-types/
├── index.ts
├── utils.ts
└── README.md

四、核心实现

1. 基础条件类型示例

// 定义一个条件类型，根据T是否为字符串决定类型
type IsString<T> = T extends string ? 'Yes' : 'No'

// 测试用例
type Test1 = IsString<string>    // 'Yes'
type Test2 = IsString<number>    // 'No'
type Test3 = IsString<''>        // 'Yes'

关键代码解释：

• extends string判断类型是否为字符串
• infer关键字可以捕获类型参数，例如：

type GetKey<T> = T extends Record<infer K, any> ? K : never
type Test = GetKey<{ id: number; name: string }> // 'id' | 'name'

2. 内置条件类型示例

// 使用Extract提取字符串类型
type ExtractString = Extract<'a' | 1 | 'b' | true, string> // 'a' | 'b'

// 使用Exclude排除数字类型
type ExcludeNumber = Exclude<'a' | 1 | 'b' | true, number> // 'a' | 'b' | true

// 使用NonNullable排除null和undefined
type NonNull = NonNullable<string | null | undefined> // string

关键代码解释：

• Extract内部实现：

  type Extract<T, U> = T extends U ? T : never

• Exclude内部实现：

  type Exclude<T, U> = T extends U ? never : T

3. 组合使用示例

// 定义一个类型，根据是否包含特定字段生成不同类型
type GetWithField<T, K extends keyof T> = 
  T extends Record<K, any> ? { [P in K]: T[P] } : never

// 测试用例
type Test = GetWithField<{ id: number; name: string }, 'id'> 
// { id: number }

关键代码解释：

• Record<K, any>确保类型包含字段K
• 通过infer可以捕获具体字段类型

五、完整案例

1. API响应类型处理

假设我们有一个API接口，根据不同的请求状态返回不同的数据结构：

// 定义请求状态类型
type RequestStatus = 'success' | 'error' | 'loading'

// 定义响应类型
type ApiResponse<T> = {
  status: RequestStatus
  data: T | null
  error: string | null
}

// 使用条件类型处理响应数据
type ExtractData<T> = 
  T extends { status: 'success' } ? T['data'] : never

// 使用内置类型提取成功状态的数据
type SuccessData = ExtractData<ApiResponse<{ id: number }>> // { id: number }

完整案例代码：

// utils.ts
type RequestStatus = 'success' | 'error' | 'loading'

type ApiResponse<T> = {
  status: RequestStatus
  data: T | null
  error: string | null
}

// 提取成功状态的数据
type ExtractData<T> = T extends { status: 'success' } ? T['data'] : never

// 提取错误信息
type ExtractError<T> = T extends { status: 'error' } ? T['error'] : never

// 提取数据类型
type ExtractType<T> = T extends { status: 'success' } ? T['data'] : never

// 定义接口
interface User {
  id: number
  name: string
}

// 使用类型
type SuccessResponse = ApiResponse<User>
type SuccessData = ExtractData<SuccessResponse> // User
type SuccessError = ExtractError<SuccessResponse> // never

六、源码解析

1. 条件类型的内部实现

TypeScript的条件类型在编译时会被转换为类型守卫，例如：

type IsString<T> = T extends string ? 'Yes' : 'No'

会被编译器处理为：

type IsString<T> = T extends string ? 'Yes' : 'No'

在类型检查时，编译器会根据T的实际类型进行判断。

2. 内置类型的实现原理

Extract的实现本质上是：

type Extract<T, U> = T extends U ? T : never

而Exclude的实现是：

type Exclude<T, U> = T extends U ? never : T

这些实现都是基于条件类型的基础。

七、进阶使用

1. 类型参数推断

type GetProps<T> = T extends { [key in K]: infer V } ? V : never

可以用于提取特定字段的类型：

type Props = GetProps<{ id: number; name: string }, 'id'> // number

2. 与泛型结合使用

type MapType<T, U> = T extends Record<infer K, infer V> ? Record<K, U> : never

可以将类型映射到新类型：

type Result = MapType<{ id: number; name: string }, string> // { id: string; name: string }

3. 与类型操作符结合使用

type GetKey<T> = T extends Record<infer K, any> ? K : never
type GetValues<T> = T extends Record<any, infer V> ? V : never

八、性能与工程实践

1. 性能优化

• 避免过度嵌套的条件类型
• 对复杂类型进行拆分
• 使用类型别名减少重复定义

2. 安全风险

• 类型推断错误可能导致运行时错误
• 未正确处理never类型可能引发类型漏洞

3. 异常处理

function safeGet<T, K extends keyof T>(obj: T, key: K): T[K] | undefined {
  return obj[key]
}

4. 类型守卫

function isString(value: any): value is string {
  return typeof value === 'string'
}

九、常见问题与踩坑

1. 错误示例

type MyType<T> = T extends string ? string : number
type Test = MyType<string | number> // string | number

问题：未正确处理联合类型

2. 正确示例

type MyType<T> = T extends string ? string : T extends number ? number : never
type Test = MyType<string | number> // string | number

3. 常见错误

• 忘记使用infer关键字
• 未处理never类型
• 未正确处理联合类型

4. 解决方法

• 使用infer捕获类型信息
• 使用never处理无法匹配的情况
• 使用类型守卫确保类型安全

十、最佳实践

1. 使用条件类型处理动态类型：在需要根据类型参数生成不同类型时，使用条件类型
2. 结合内置类型提升效率：优先使用Extract、Exclude等内置类型
3. 避免过度复杂化：保持类型定义简洁，避免嵌套过多
4. 进行类型验证：使用类型守卫确保类型安全
5. 处理never类型：确保所有可能的类型分支都被覆盖

十一、总结

条件类型和内置条件类型是TypeScript类型系统的重要组成部分，它们提供了强大的类型处理能力。通过条件类型，我们可以根据类型参数动态生成不同类型，而内置条件类型则提供了更简洁的类型操作方式。在实际开发中，需要根据具体场景选择合适的类型处理方式，避免过度复杂化，同时确保类型安全。通过合理使用这些功能，可以显著提升代码的可维护性和健壮性。