TypeScript 从类型中排除属性

在本文中，我们将介绍如何在 TypeScript 中从类型中排除属性。TypeScript 是一种静态类型检查的 JavaScript 超集，它允许我们在编写代码时使用类型注解，并提供了强大的类型推断功能。有时候，我们可能需要从一个类型中排除某些属性，以便在特定的场景中使用。

阅读更多：TypeScript 教程

使用 Exclude<T, U> 类型

TypeScript 提供了一个 Exclude<T, U> 类型，它允许我们从类型 T 中排除类型 U。我们可以使用 Exclude<T, U> 创建一个新的类型，该类型不包括类型 U 中的属性。

下面是一个示例：

type Person = {
  name: string;
  age: number;
  gender: string;
};

type PersonWithoutAge = Exclude<Person, { age: number }>;

let person: PersonWithoutAge = {
  name: "John",
  gender: "male",
};

console.log(person.name); // Output: John
console.log(person.gender); // Output: male

在上面的示例中，我们有一个包含 name、age 和 gender 属性的 Person 类型。然后，我们使用 Exclude<Person, { age: number }> 创建一个名为 PersonWithoutAge 的新类型，该类型不包括 age 属性。最后，我们声明一个类型为 PersonWithoutAge 的变量 person，并分配了 name 和 gender 属性的值。由于我们排除了 age 属性，所以在使用 person 变量时，它只能访问 name 和 gender 属性。

使用 Omit<T, K> 类型

除了使用 Exclude<T, U> 类型，我们还可以使用 Omit<T, K> 类型来从类型 T 中排除指定的属性。与 Exclude<T, U> 类型不同，我们可以使用 Omit<T, K> 排除多个属性。

下面是一个示例：

type Person = {
  name: string;
  age: number;
  gender: string;
};

type PersonWithoutNameAndAge = Omit<Person, "name" | "age">;

let person: PersonWithoutNameAndAge = {
  gender: "male",
};

console.log(person.gender); // Output: male

在上面的示例中，我们使用 Omit<Person, “name” | “age”> 创建一个名为 PersonWithoutNameAndAge 的新类型，该类型排除了 name 和 age 属性。然后，我们声明一个类型为 PersonWithoutNameAndAge 的变量 person，并分配了 gender 属性的值。由于我们排除了 name 和 age 属性，所以在使用 person 变量时，它只能访问 gender 属性。

使用 Pick<T, K> 类型

与排除属性相反，有时我们可能只想从一个类型中选择指定的属性。TypeScript 提供了一个 Pick<T, K> 类型，它允许我们从类型 T 中选择属性 K。

下面是一个示例：

type Person = {
  name: string;
  age: number;
  gender: string;
};

type PersonWithNameAndGender = Pick<Person, "name" | "gender">;

let person: PersonWithNameAndGender = {
  name: "John",
  gender: "male",
};

console.log(person.name); // Output: John
console.log(person.gender); // Output: male

在上面的示例中，我们使用 Pick<Person, “name” | “gender”> 创建一个名为 PersonWithNameAndGender 的新类型，该类型只包括 name 和 gender 属性。然后，我们声明一个类型为 PersonWithNameAndGender 的变量 person，并分配了 name 和 gender 属性的值。由于我们只选择了 name 和 gender 属性，所以在使用 person 变量时，它只能访问这两个属性。

使用 Readonly 类型

有时候，我们希望在 TypeScript 中定义一个只读类型，即不能修改该类型的属性。TypeScript 提供了 Readonly 类型，它用于将类型 T 的所有属性设置为只读。

下面是一个示例：

type Person = {
  name: string;
  age: number;
};

type ReadonlyPerson = Readonly<Person>;

let person: ReadonlyPerson = {
  name: "John",
  age: 25,
};

person.name = "Jane"; // Error: Cannot assign to 'name' because it is a read-only property
person.age = 30; // Error: Cannot assign to 'age' because it is a read-only property

console.log(person.name); // Output: John
console.log(person.age); // Output: 25

在上面的示例中，我们使用 Readonly 创建一个名为 ReadonlyPerson 的新类型，并将它应用于变量 person。由于 ReadonlyPerson 是只读的，所以我们无法修改其属性。在尝试给 person.name 和 person.age 赋值时，TypeScript 会报错。但我们仍然可以访问它们的值。

使用 Partial 类型

与只读类型相反，有时我们希望在 TypeScript 中定义一个可以修改的部分类型。TypeScript 提供了 Partial 类型，它用于将类型 T 的所有属性设置为可选。

下面是一个示例：

type Person = {
  name: string;
  age: number;
};

type PartialPerson = Partial<Person>;

let person: PartialPerson = {};

person.name = "John";
person.age = 25;

console.log(person.name); // Output: John
console.log(person.age); // Output: 25

在上面的示例中，我们使用 Partial 创建一个名为 PartialPerson 的新类型，并将它应用于变量 person。由于 PartialPerson 的所有属性都是可选的，所以我们可以在赋值之前或之后添加属性。我们可以使用 person.name 和 person.age 属性，并将它们的值设置为任意值。