返回

ts工具泛型

前端

前言

上一篇文章简单介绍了泛型的概念,以及函数泛型、类泛型、接口泛型的使用方式,还有多参数泛型和泛型约束的方法。本篇将介绍下ts官网提供的一些工具泛型,什么是工具泛型呢?简单来说就是可以把一个复杂的类型转变成我们想要的类型。

Pick

以下代码举例:

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type TodoPreview = Pick<Todo, "title" | "completed">;

const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};

这里的Pick也是工具泛型的一种,可以从一个复杂的对象类型中,挑选出我们想要的属性,并生成一个新的类型。

Omit

Omit与Pick类似,不同的是Omit是排除掉我们不需要的属性,而不是挑选出需要的属性。

type TodoWithoutDescription = Omit<Todo, "description">;

const todo: TodoWithoutDescription = {
  title: "Clean room",
  completed: false,
};

Readonly

Readonly可以把一个类型的所有属性都标记为只读属性。

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type ReadonlyTodo = Readonly<Todo>;

const todo: ReadonlyTodo = {
  title: "Clean room",
  description: "Take out the trash",
  completed: false,
};

todo.title = "Mow lawn"; // Error: Cannot assign to 'title' because it is a read-only property.

Partial

Partial可以把一个类型的所有属性都标记为可选属性。

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type PartialTodo = Partial<Todo>;

const todo: PartialTodo = {
  title: "Clean room",
};

Record

Record可以创建一个新的类型,该类型具有指定的键类型和值类型。

type AgeMap = Record<string, number>;

const ages: AgeMap = {
  "Alice": 21,
  "Bob": 25,
  "Carol": 30,
};

Exclude

Exclude可以从一个类型中排除另一个类型。

type Numeric = Exclude<"1" | "2" | "3" | "4" | "5", "3" | "4">;

// Numeric is now "1" | "2" | "5"

总结

工具泛型是ts提供的一种非常强大的工具,可以帮助我们创建出各种各样的新类型。这些工具泛型可以让我们在编写代码时更加灵活,并且可以提高代码的可读性和可维护性。