TypeScript 提供了一些常见的实用工具类型(Utility Types),用于在类型系统中进行各种操作。这些工具类型可以帮助我们简化类型定义,提高代码的可读性和可维护性。以下是一些常见的实用工具类型及其示例:
1. Partial<T>
Partial<T> 用于将类型 T 的所有属性变为可选属性。
示例:
interface User {
id: number
name: string
email: string
}
type PartialUser = Partial<User>
// 使用 PartialUser 类型
const updateUser = (user: PartialUser) => {
// 可以只传递部分属性
console.log(user)
}
updateUser({ id: 1, name: 'Alice' })
updateUser({ email: 'alice@example.com' })
2. Required<T>
Required<T> 用于将类型 T 的所有属性变为必选属性。
示例:
interface User {
id: number
name?: string
email?: string
}
type RequiredUser = Required<User>
// 使用 RequiredUser 类型
const createUser = (user: RequiredUser) => {
// 必须传递所有属性
console.log(user)
}
createUser({ id: 1, name: 'Alice', email: 'alice@example.com' })
3. Readonly<T>
Readonly<T> 用于将类型 T 的所有属性变为只读属性。
示例:
interface User {
id: number
name: string
email: string
}
type ReadonlyUser = Readonly<User>
// 使用 ReadonlyUser 类型
const user: ReadonlyUser = { id: 1, name: 'Alice', email: 'alice@example.com' }
// 尝试修改属性会导致编译错误
user.name = 'Bob' // Error: Cannot assign to 'name' because it is a read-only property.
4. Pick<T, K>
Pick<T, K> 用于从类型 T 中选择一组属性 K,并创建一个新的类型。
示例:
interface User {
id: number
name: string
email: string
}
type UserPreview = Pick<User, 'id' | 'name'>
// 使用 UserPreview 类型
const preview: UserPreview = { id: 1, name: 'Alice' }
5. Omit<T, K>
Omit<T, K> 用于从类型 T 中排除一组属性 K,并创建一个新的类型。
示例:
interface User {
id: number
name: string
email: string
}
type UserWithoutEmail = Omit<User, 'email'>
// 使用 UserWithoutEmail 类型
const user: UserWithoutEmail = { id: 1, name: 'Alice' }
6. Record<K, T>
Record<K, T> 用于创建一个类型,其属性名为 K,属性值为 T。
示例:
type Role = 'admin' | 'user' | 'guest'
interface User {
id: number
name: string
}
type UserRoleMap = Record<Role, User>
// 使用 UserRoleMap 类型
const userRoles: UserRoleMap = {
admin: { id: 1, name: 'Alice' },
user: { id: 2, name: 'Bob' },
guest: { id: 3, name: 'Charlie' }
}
7. Exclude<T, U>
Exclude<T, U> 用于从类型 T 中排除类型 U。
示例:
type AllRoles = 'admin' | 'user' | 'guest'
type UserRoles = Exclude<AllRoles, 'guest'>
// 使用 UserRoles 类型
const role1: UserRoles = 'admin'
const role2: UserRoles = 'user'
const role3: UserRoles = 'guest' // Error: Type '"guest"' is not assignable to type 'UserRoles'.
8. Extract<T, U>
Extract<T, U> 用于从类型 T 中提取类型 U。
示例:
type AllRoles = 'admin' | 'user' | 'guest'
type AdminRoles = Extract<AllRoles, 'admin' | 'guest'>
// 使用 AdminRoles 类型
const role1: AdminRoles = 'admin'
const role2: AdminRoles = 'guest'
const role3: AdminRoles = 'user' // Error: Type '"user"' is not assignable to type 'AdminRoles'.
9. NonNullable<T>
NonNullable<T> 用于从类型 T 中排除 null 和 undefined。
示例:
type User = {
id: number
name: string | null
}
type NonNullableUser = NonNullable<User['name']>
// 使用 NonNullableUser 类型
const name1: NonNullableUser = 'Alice'
const name2: NonNullableUser = null // Error: Type 'null' is not assignable to type 'NonNullableUser'.
10. ReturnType<T>
ReturnType<T> 用于获取函数类型 T 的返回类型。
示例:
function getUser() {
return { id: 1, name: 'Alice' }
}
type User = ReturnType<typeof getUser>
// 使用 User 类型
const user: User = { id: 1, name: 'Alice' }
总结
TypeScript 提供了许多实用工具类型,用于在类型系统中进行各种操作。这些工具类型可以帮助我们简化类型定义,提高代码的可读性和可维护性。
推荐阅读
我的专栏 前端工作手册 正在连载,计划用一系列通俗易懂的文章,和大家一起梳理前端工作中的方方面面:必备知识、常见业务场景解决方案、工程化、语言/框架深入理解、前端新场景、周边技能、程序员软技能等。