跳到主要内容

TypeScript 内置泛型

TypeScript 提供了许多内置的泛型工具类型,这些工具类型可以帮助我们更高效地处理类型,减少重复代码,并提高代码的可读性和可维护性。本文将介绍一些常用的内置泛型工具类型,并通过实际案例展示它们的应用场景。

什么是内置泛型?

内置泛型是 TypeScript 提供的一些预定义的泛型工具类型,它们可以帮助我们在编写类型时更加灵活和高效。这些工具类型通常用于操作和转换现有类型,例如从对象类型中提取属性类型、将类型变为可选或只读等。

常用的内置泛型工具类型

1. Partial<T>

Partial<T> 是 TypeScript 提供的一个内置泛型工具类型,它可以将类型 T 的所有属性变为可选属性。

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

type PartialUser = Partial<User>;

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

在上面的例子中,PartialUser 类型的所有属性都变为可选属性,因此我们可以只提供 name 属性而不提供 age 属性。

2. Required<T>

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

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

type RequiredUser = Required<User>;

const user: RequiredUser = {
name: "Alice",
age: 25,
};

在这个例子中,RequiredUser 类型的所有属性都变为必选属性,因此我们必须提供 nameage 属性。

3. Readonly<T>

Readonly<T> 可以将类型 T 的所有属性变为只读属性,这意味着这些属性不能被重新赋值。

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

type ReadonlyUser = Readonly<User>;

const user: ReadonlyUser = {
name: "Alice",
age: 25,
};

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

在这个例子中,ReadonlyUser 类型的所有属性都变为只读属性,因此我们不能修改 nameage 的值。

4. Record<K, T>

Record<K, T> 是一个用于创建对象类型的泛型工具类型,其中 K 是键的类型,T 是值的类型。

typescript
type UserRoles = Record<string, boolean>;

const roles: UserRoles = {
admin: true,
user: false,
};

在这个例子中,UserRoles 类型表示一个键为字符串、值为布尔值的对象类型。

5. Pick<T, K>

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

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

type UserNameAndAge = Pick<User, "name" | "age">;

const user: UserNameAndAge = {
name: "Alice",
age: 25,
};

在这个例子中,UserNameAndAge 类型只包含 User 类型中的 nameage 属性。

6. Omit<T, K>

Omit<T, K>Pick<T, K> 相反,它可以从类型 T 中排除指定的属性 K 来创建一个新的类型。

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

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

const user: UserWithoutEmail = {
name: "Alice",
age: 25,
};

在这个例子中,UserWithoutEmail 类型排除了 User 类型中的 email 属性。

实际应用场景

表单验证

在处理表单数据时,我们通常需要将表单字段的类型从必选变为可选,以便在用户未填写所有字段时也能提交表单。这时可以使用 Partial<T> 来简化类型定义。

typescript
interface FormData {
username: string;
password: string;
email: string;
}

type PartialFormData = Partial<FormData>;

const formData: PartialFormData = {
username: "Alice",
};

只读配置

在应用程序中,某些配置项可能需要在初始化后保持不变。这时可以使用 Readonly<T> 来确保配置项不会被意外修改。

typescript
interface AppConfig {
apiUrl: string;
maxRetries: number;
}

const config: Readonly<AppConfig> = {
apiUrl: "https://api.example.com",
maxRetries: 3,
};

config.apiUrl = "https://new-api.example.com"; // 错误:无法分配到 "apiUrl" ,因为它是只读属性

总结

TypeScript 内置的泛型工具类型为我们提供了强大的类型操作能力,能够帮助我们更高效地处理复杂类型。通过使用这些工具类型,我们可以减少重复代码,提高代码的可读性和可维护性。

提示

在实际开发中,合理使用内置泛型工具类型可以显著提升代码质量。建议多练习这些工具类型的使用,以便在项目中灵活运用。

附加资源

练习

  1. 使用 Partial<T>Required<T> 创建一个表单类型,其中部分字段为可选,部分字段为必选。
  2. 使用 Pick<T, K>Omit<T, K> 从一个复杂的对象类型中提取或排除某些属性。
  3. 使用 Record<K, T> 创建一个表示用户权限的对象类型,其中键为用户角色,值为布尔类型。

通过完成这些练习,你将更好地掌握 TypeScript 内置泛型工具类型的使用。