TypeScript 中一些常见的实用工具类型(Utility Types)

163 阅读3分钟

TypeScript 提供了一些常见的实用工具类型(Utility Types),用于在类型系统中进行各种操作。这些工具类型可以帮助我们简化类型定义,提高代码的可读性和可维护性。以下是一些常见的实用工具类型及其示例:

1. Partial<T>

Partial<T> 用于将类型 T 的所有属性变为可选属性。

示例

interface User {
  idnumber
  namestring
  emailstring
}

type PartialUser = Partial<User>
// 使用 PartialUser 类型
const updateUser = (user: PartialUser) => {
  // 可以只传递部分属性
  console.log(user)
}

updateUser({ id1name'Alice' })
updateUser({ email'alice@example.com' })

2. Required<T>

Required<T> 用于将类型 T 的所有属性变为必选属性。

示例

interface User {
  idnumber
  name?: string
  email?: string
}

type RequiredUser = Required<User>
// 使用 RequiredUser 类型
const createUser = (user: RequiredUser) => {
  // 必须传递所有属性
  console.log(user)
}
createUser({ id1name'Alice'email'alice@example.com' })

3. Readonly<T>

Readonly<T> 用于将类型 T 的所有属性变为只读属性。

示例

interface User {
  idnumber
  namestring
  emailstring
}

type ReadonlyUser = Readonly<User>
// 使用 ReadonlyUser 类型
const userReadonlyUser = { id1name'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 {
  idnumber
  namestring
  emailstring
}

type UserPreview = Pick<User'id' | 'name'>
// 使用 UserPreview 类型
const previewUserPreview = { id1name'Alice' }

5. Omit<T, K>

Omit<T, K> 用于从类型 T 中排除一组属性 K,并创建一个新的类型。

示例

interface User {
  idnumber
  namestring
  emailstring
}

type UserWithoutEmail = Omit<User'email'>
// 使用 UserWithoutEmail 类型
const userUserWithoutEmail = { id1name'Alice' }

6. Record<K, T>

Record<K, T> 用于创建一个类型,其属性名为 K,属性值为 T

示例

type Role = 'admin' | 'user' | 'guest'

interface User {
  idnumber
  namestring
}

type UserRoleMap = Record<RoleUser>
// 使用 UserRoleMap 类型
const userRolesUserRoleMap = {
  admin: { id1name'Alice' },
  user: { id2name'Bob' },
  guest: { id3name'Charlie' }
}

7. Exclude<T, U>

Exclude<T, U> 用于从类型 T 中排除类型 U

示例

type AllRoles = 'admin' | 'user' | 'guest'
type UserRoles = Exclude<AllRoles'guest'>

// 使用 UserRoles 类型
const role1UserRoles = 'admin'
const role2UserRoles = 'user'
const role3UserRoles = '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 role1AdminRoles = 'admin'
const role2AdminRoles = 'guest'
const role3AdminRoles = 'user' // Error: Type '"user"' is not assignable to type 'AdminRoles'.

9. NonNullable<T>

NonNullable<T> 用于从类型 T 中排除 null 和 undefined

示例

type User = {
  idnumber
  namestring | null
}

type NonNullableUser = NonNullable<User['name']>
// 使用 NonNullableUser 类型
const name1NonNullableUser = 'Alice'
const name2NonNullableUser = null // Error: Type 'null' is not assignable to type 'NonNullableUser'.

10. ReturnType<T>

ReturnType<T> 用于获取函数类型 T 的返回类型。

示例

function getUser() {
  return { id1name'Alice' }
}

type User = ReturnType<typeof getUser>

// 使用 User 类型
const userUser = { id1name'Alice' }

总结

TypeScript 提供了许多实用工具类型,用于在类型系统中进行各种操作。这些工具类型可以帮助我们简化类型定义,提高代码的可读性和可维护性。

推荐阅读

我的专栏 前端工作手册 正在连载,计划用一系列通俗易懂的文章,和大家一起梳理前端工作中的方方面面:必备知识、常见业务场景解决方案、工程化、语言/框架深入理解、前端新场景、周边技能、程序员软技能等。