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
中排除 null
和 undefined
。
示例
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 内置工具类型为开发者提供了强大的类型操作能力,能够显著提升代码的可读性和可维护性。通过掌握这些工具类型,你可以更高效地处理复杂的类型逻辑。
附加资源与练习
- 练习:尝试使用
Pick
和Omit
创建一个新的类型,并为其添加额外的属性。 - 资源: