跳到主要内容

TypeScript 内置工具类型

介绍

TypeScript 提供了许多内置的工具类型(Utility Types),它们可以帮助开发者更高效地操作和转换类型。这些工具类型本质上是泛型类型,能够基于现有类型生成新的类型。对于初学者来说,掌握这些工具类型可以显著提升代码的可读性和可维护性。

在本节中,我们将逐步介绍一些常用的 TypeScript 内置工具类型,并通过实际案例展示它们的应用场景。


常用内置工具类型

1. Partial<T>

Partial<T> 是 TypeScript 中最常用的工具类型之一。它可以将类型 T 的所有属性变为可选的。

示例

typescript
interface User {
name: string;
age: number;
email: string;
}

type PartialUser = Partial<User>;

const user: PartialUser = {
name: "Alice",
};

在上面的例子中,PartialUser 类型的所有属性都变成了可选的,因此我们可以只定义 name 属性。


2. Required<T>

Partial<T> 相反,Required<T> 将类型 T 的所有属性变为必选的。

示例

typescript
interface User {
name?: string;
age?: number;
email?: string;
}

type RequiredUser = Required<User>;

const user: RequiredUser = {
name: "Bob",
age: 25,
email: "bob@example.com",
};

如果缺少任何一个属性,TypeScript 会报错。


3. Readonly<T>

Readonly<T> 将类型 T 的所有属性变为只读的,即不能修改。

示例

typescript
interface User {
name: string;
age: number;
}

type ReadonlyUser = Readonly<User>;

const user: ReadonlyUser = {
name: "Charlie",
age: 30,
};

user.name = "David"; // 错误:无法分配到 "name",因为它是只读属性

4. Record<K, T>

Record<K, T> 用于创建一个对象类型,其键为类型 K,值为类型 T

示例

typescript
type UserRoles = "admin" | "editor" | "viewer";

type RolePermissions = Record<UserRoles, boolean>;

const permissions: RolePermissions = {
admin: true,
editor: true,
viewer: false,
};

5. Pick<T, K>

Pick<T, K> 从类型 T 中选择指定的属性 K 来创建新类型。

示例

typescript
interface User {
name: string;
age: number;
email: string;
}

type UserNameAndEmail = Pick<User, "name" | "email">;

const user: UserNameAndEmail = {
name: "Eve",
email: "eve@example.com",
};

6. Omit<T, K>

Omit<T, K> 从类型 T 中移除指定的属性 K 来创建新类型。

示例

typescript
interface User {
name: string;
age: number;
email: string;
}

type UserWithoutEmail = Omit<User, "email">;

const user: UserWithoutEmail = {
name: "Frank",
age: 35,
};

7. Exclude<T, U>Extract<T, U>

  • Exclude<T, U>:从类型 T 中排除可以赋值给类型 U 的类型。
  • Extract<T, U>:从类型 T 中提取可以赋值给类型 U 的类型。

示例

typescript
type Roles = "admin" | "editor" | "viewer";
type NonAdminRoles = Exclude<Roles, "admin">; // "editor" | "viewer"
type AdminRole = Extract<Roles, "admin">; // "admin"

8. NonNullable<T>

NonNullable<T> 从类型 T 中排除 nullundefined

示例

typescript
type MaybeString = string | null | undefined;
type DefinitelyString = NonNullable<MaybeString>; // string

实际应用场景

表单验证

假设我们有一个用户表单,其中某些字段是可选的。我们可以使用 Partial<T> 来表示表单的初始状态,然后使用 Required<T> 来确保提交时所有字段都已填写。

typescript
interface UserForm {
name: string;
age: number;
email: string;
}

type PartialUserForm = Partial<UserForm>;
type RequiredUserForm = Required<UserForm>;

const initialForm: PartialUserForm = {
name: "Grace",
};

const submittedForm: RequiredUserForm = {
name: "Grace",
age: 28,
email: "grace@example.com",
};

总结

TypeScript 内置工具类型为开发者提供了强大的类型操作能力,能够显著提升代码的可读性和可维护性。通过掌握这些工具类型,你可以更高效地处理复杂的类型逻辑。


附加资源与练习